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

Question

查看演示:jsFiddle

• 我有一个简单的表单，点击“显示”/“取消”时会切换该表单
• 一切正常，但如果在表单显示后不久单击“取消”，则在动画开始之前会有 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() 的目的，您的悬停动画和展开/折叠动画会被单独处理。请参阅 http://api.jquery.com/animate/ 处的 queue 选项(当给定字符串时)了解更多详情。