如何防止这个奇怪的jQuery .animate()滞后？

Question

见demo:jsFiddle

• 我有一个简单的表单,在点击'show'/'cancel'时切换
• 一切正常,但是如果你在表单显示后不久点击"取消",那么在动画开始之前就有2-3秒的延迟.
• 如果您在单击"取消"之前等待几秒钟,则不会发生这种情况.
• 在所有测试的浏览器中都会出现滞后(即ff,chrome).

1.什么可能导致这种滞后,如何防止这种情况发生？

2.有没有更好的方法来编码这个动画序列,这可能会阻止任何滞后？

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() {
            $("#newResFormWrap").toggle('fast', function (){
                $("#addRes").animate({ opacity: 100 });
            });
        });
    }
}

Answer 1

使用以下命令确保在开始新动画时清除队列stop():

$("#newResForm").stop().animate({ opacity: 0 }, 100,function() {
        $("#newResFormWrap").toggle('fast', function (){
            $("#addRes").animate({ opacity: 100 }); 
                 // ...

导致滞后的原因是你的长2秒动画$("#newResForm").animate({ opacity: 100 },2000)尚未完成.JQuery默认将动画放入队列,等待一个队列在下一个开始之前完成.您清除队列stop(),如果您有两个相互矛盾的动画(如打开和关闭动画,或鼠标悬停/鼠标移动动画),这将特别有用.实际上,您可能会发现开始所有动画链是一个好习惯,stop()除非您知道您希望它们与其他地方可能发生的先前动画一起排队.

进入更高级的主题,您甚至可以命名不同的队列,以便例如您的悬停动画和展开/折叠动画被单独处理stop().有关详细信息queue,请参阅http://api.jquery.com/animate/上的选项(如果给出字符串).