Fix coding style and update README

README.md

@@ -64,6 +64,7 @@ Options
 |`speed` | 300   |int | The duration which are given in milliseconds of effect.|
 |`scale` | 3     |int | The size how the ripple will scale to in animation.| 
 |`effect`| ripple|string| Determine which effect you want to use.|
+|`transitionEnd`| function(){} | function | Callback after transition end. | 
 
 Effects
 ======  

demo.html

@@ -15,9 +15,12 @@
 	<script type="text/javascript" src="js/mawbutton.js"></script>
     <script type="text/javascript">
         $('button').mawbutton({
-            speed : 300,
-            scale : 5,
-            effect : "ripple"
+            speed : 250,
+            scale : 6,
+            effect : "ripple",
+            transitionEnd:function(){
+                console.log('end');
+            }
         });
     </script>
 </body>

js/mawbutton.js

@@ -4,34 +4,43 @@
 		var settings = $.extend({
 			effect : "ripple",
 			scale : 3,
-			speed : 300		// ms
+			speed : 300,					// ms
+			transitionEnd : function(){}	// callback when transition ends.
 		}, options);
 
 		return this.each(function() {
 			var $this = $(this);
+			var supportEvent = ('ontouchstart' in window ) ? 'touchstart':'click';
+
 			$this.addClass('mawbutton')
-
-			.on('click', function(e) {		//bind click event
+			.on(supportEvent, function(e) {		//bind touch/click event
 				e.preventDefault();
 				$this.append('<div class="mawbutton-'+settings.effect+'" ></div>');
+
 				// Fetch click position and size
 				var posX = $this.offset().left,
 					posY = $this.offset().top;
 				var w = $this.width(),
 					h = $this.height();
 				var targetX= e.pageX - posX;
 				var targetY= e.pageY - posY;
+
+				//Fix target position
+				if(!targetX || !targetY){
+					 targetX = e.originalEvent.touches[0].pageX;
+					 targetY = e.originalEvent.touches[0].pageY;
+				}
+
 				var ratio = settings.scale / 2;    							
 
 				//Animate Start
 				$effectElem = $this.children(':last');
-
 				$effectElem.addClass("mawbutton-stop")
 							.css({
 								"top" : targetY,
 								"left" : targetX,
-								"width" : h*settings.scale,
-								"height" : h*settings.scale,
+								"width" : h * settings.scale,
+								"height" : h * settings.scale,
 								"margin-left" : -h * ratio,
 								"margin-top" : -h * ratio,
 								"transition-duration" : settings.speed+"ms",
@@ -51,6 +60,7 @@
 					});
 					setTimeout(function(){
 						$this.find(".mawbutton-"+settings.effect).first().remove();
+						settings.transitionEnd.call(this);
 					},settings.speed);
 				}, settings.speed);
 			});