见演示：
jsFiddle
>我有一个简单的表单,当点击“显示”/“取消”时被切换
>一切都很好,但是如果您在表单显示后立即点击“取消”,则在动画甚至开始之前有一个很好的2-3秒滞后.
>如果您在点击“取消”之前等待几秒钟,则不会发生这种情况.
所有测试浏览器(即ff,chrome)都会出现这种滞后现象.
什么可能导致这个滞后,怎么可以预防？
有没有更好的编码这个动画序列的方法,可能会阻止任何滞后？
HTML：
<div id="newResFormWrap">
<form id="newResForm" action="" method="post" name="newRes">
<div id="newResFormCont">
<h3>title</h3>
<p>form!</p>
<div class="button" id="cancelNewRes">Cancel</div>
</div>
</form>
</div>
<div class="button" id="addRes">show</div>
jQuery的：
$("#newResForm").css({opacity: 0});
$("#addRes").click(function () {
toggleNewRes()
});
$("#cancelNewRes").click(function () {
toggleNewRes()
});
//toggleNewRes
function toggleNewRes() {
if ($("#newResFormWrap").css('display') == "none") {//if hidden
$("#addRes").animate({ opacity: 0 },'fast',function() {
$("#newResFormWrap").toggle('fast',function (){
$("#newResForm").animate({ opacity: 100 },2000);
});
});
} else { //if visible
$("#newResForm").animate({ opacity: 0 },100,function (){
$("#addRes").animate({ opacity: 100 });
});
});
}
}
解决方法
确保在使用stop()启动新动画时清除队列：
$("#newResForm").stop().animate({ opacity: 0 },function() {
$("#newResFormWrap").toggle('fast',function (){
$("#addRes").animate({ opacity: 100 });
// ...
造成这个滞后的事实是你的漫长的2秒动画$(“#newResForm”).animate({opacity：100},2000)尚未完成. JQuery默认将动画放入队列中,等待下一个开始之前完成.你使用stop()清除队列,如果你有两个相互矛盾的动画(比如一个开放的动画,或者鼠标悬停/鼠标悬停动画),这个特别有用.事实上,你可能会发现一个很好的做法是用stop()开始你所有的动画链,除非你知道你希望他们可以在其他地方发生的先前的动画排队.
进入更高级的主题,您甚至可以命名不同的队列,以便例如您的悬停动画和您的扩展/折叠动画被单独处理为stop()的目的.有关详细信息,请参阅http://api.jquery.com/animate/的队列选项(给定字符串).