$(function(){ $(‘#input1‘).hover( function(){ $(‘.div1‘).stop() .animate({left:"+=50px"},1000) .animate({top:"+=40px"},2000); } ,function(){ $(‘.div1‘).stop() .animate({width:"+=50px"},2000) .animate({height:"+=40px"},1000) } ) })
CSS 部分
.div1{ width:300px; height:300px; border:1px solid #ccc; background: #666; position:absolute; left:30%; top:30%; margin-left:-150px; margin-top:-150px; }
html部分
<div class="div1"></div> <br/> <input type="button" id="input1" value="开始动画" />
测试结果：
1.执行left时，移除鼠标，发生第二个stop()，阻止left，执行top、width和height；
2.执行top时，移除鼠标，发生第二个stop()，阻止top， 执行width 和 height；
3.执行left时，移除鼠标，当未执行完top时，移入，发生第一个stop()，阻止top，按照顺序执行width和height，以及新的left和top；
4.执行top时，移除鼠标，当未执行完width时，移入，发生第一个stop()，阻止width，按顺序执行height，以及新的left和top；
结论：
stop() 只能阻止上一个动画
stop()参数测试
默认的stop(),即为stop( false , false )
在JQuery 代码中相应位置填入，则
====> stop(true,false) 阻止一个队列中（function(){ ... }）的动画
====> stop(false,true) 仅组织一个动画（类似与stop()），跳到上一个动画结束状态
====> stop(true,true) 阻止一个队列中的动画，并跳到队列末尾动画状态
原文：http://www.cnblogs.com/dongcheck/p/4132264.html