.stop()
一. 在使用animate()的时候 前面需要加上.stop()来防止移进移出的山东问题。
二.
1.定义： stop() 方法为被选元素停止当前正在运行的动画。
2.语法： $(selector).stop(stopAll,goToEnd)
参数：
stopAll : 可选。规定是否停止被选元素的所有加入队列的动画。默认是 false。
goToEnd : 可选。 规定是否立即完成当前的动画。 默认是false。 该参数只有 在设置了stopAll参数时才能使用。
第一个参数的意思是 是否清空动画序列， 也就是停止的是当前元素的动画效果还是后面附带的所有动画的效果，一般为false,跳过当前的动画效果，执行下一个动画效果。
第二个参数的意思是 是否将当前的动画进行到最后，意思就是 停止当前动画的时候动画效果刚好执行了一半，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <title>stop的用法案例</title> 6 <style type="text/css"> 7 #animater{ 8 width: 150px; 9 background:activeborder; 10 border: 1px solid black; 11 /*为了移动，需设置此属性*/ 12 position: relative; 13 } 14 </style> 15 <script type="text/javascript" src='/style/js/jquery-1.10.2.min.js'></script> 16 <script type="text/javascript"> 17 $(function(){ 18 $("#start").click(function(){ 19 $("#box").animate({height:300},"slow"); 20 $("#box").animate({width:300},"slow"); 21 $("#box").animate({height:100},"slow"); 22 $("#box").animate({width:100},"slow"); 23 }); 24 // 点击不同的button执行不同的操作 25 $('#button1').click(function(){ 26 //默认参数是false，不管写一个false还是两个false还是没写false效果一样 27 $('#box').stop(); 28 }); 29 $('#button2').click(function(){ 30 //第二个参数默认false 31 $('#box').stop(true); 32 }); 33 $('#button3').click(function(){ 34 $('#box').stop(false,true); 35 }); 36 $('#button4').click(function(){ 37 $('#box').stop(true,true); 38 }); 39 }) 40 </script> 41 </head> 42 <body> 43 <p><input type='button' value='开始测试' id='start'></p> 44 <div id="button"> 45 <input type="button" id="button1" value="stop()"/> 46 <input type="button" id="button2" value="stop(true)"/> 47 <input type="button" id="button3" value="stop(false,true)"/> 48 <input type="button" id="button4" value="stop(true,true)"/> 49 </div> 50 <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">stop运动参数测试</div> 51 </body> 52 </html>
