如何防止这种奇怪的jQuery.animate（）延迟？

请参见演示：

• 我有一个简单的表单，单击“显示”/“取消”时可以切换该表单
• 一切正常，但是如果在表单显示后不久单击“取消”，动画开始前会有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>

在动画调用之前添加

.stop（）

：

function toggleNewRes() {
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
        $("#addRes").stop().animate({ opacity: 0 }, 'fast', function() {
            /...
        });
    } else { //if visible
        $("#newResForm").stop().animate({ opacity: 0 }, 100,function() {
            /...
        });
    }
}

---

使用

stop（）

启动新动画时，请确保清除队列：

造成延迟的原因是，您的长2秒动画

$（“#newResForm”）.animate（{opacity:100}，2000）

尚未完成。JQuery默认情况下将动画放入队列，等待一个动画完成，然后再开始下一个动画。您可以使用

stop（）

清除队列，如果您有两个相互矛盾的动画（如打开和关闭动画，或鼠标悬停/鼠标悬停动画），这将非常有用。事实上，您可能会发现使用

stop（）

开始所有动画链是一种很好的做法，除非您知道希望它们与其他地方可能发生的先前动画一起排队

进入更高级的主题，您甚至可以命名不同的队列，例如，为了

stop（）

的目的，您的悬停动画和展开/折叠动画被分开处理。有关更多详细信息，请参阅中的

队列
选项（当给定字符串时）。
尝试使用
stop（）
：


两件事。首先看看这个，看看它的行动

问题是淡入动画需要2秒。因此，当你在2秒内关闭它时，你会遇到延迟

我重新调整了你的时间，以确保没有延误。看看你是否喜欢它们，随意改变它们

if ($("#newResFormWrap").css('display') == "none") {//if hidden 
    $("#addRes").animate({ opacity: 0 }, 'fast', function() {
        $("#newResFormWrap").toggle(0, function (){
            $("#newResForm").animate({ opacity: 100 },400);
        });
    });
} else { //if visible
    console.log('click');
    $("#newResForm").animate({ opacity: 0 }, 0, function() {
        console.log('animated');
        $("#newResFormWrap").toggle(0)
    });
    $("#addRes").animate({ opacity: 100 }, 'fast');
}

首先，这是可行的（将在10分钟内接受），但是，为什么需要它呢？我可以清楚地看到，动画finished@Roy参加了一个小型会议；）我想上面提到的stop（）方法也是解决方案中的一个重要因素。。但是感谢您的回复请注意，
.stop（）
不会清除队列，而只是停止当前正在运行的动画。在某些情况下，您可能需要运行
.stop（true）
，以进一步清除所有排队的动画，或者甚至运行
.stop（true，true）
，以进一步立即完成当前动画到终点。更多关于该网站的信息。就我而言，只有后者起作用。
$("#newResForm").stop().animate({ opacity: 0 }, 100,function() {
        $("#newResFormWrap").toggle('fast', function (){
            $("#addRes").animate({ opacity: 100 }); 
                 // ...

if ($("#newResFormWrap").is(':visible')) {//this way is eaiser to check
    $("#addRes").stop(true,false).animate({ opacity: 0 }, 'fast', function() {
        $("#newResFormWrap").toggle('fast', function (){
            $("#newResForm").animate({ opacity: 100 },2000);
        });
    });
}

if ($("#newResFormWrap").css('display') == "none") {//if hidden 
    $("#addRes").animate({ opacity: 0 }, 'fast', function() {
        $("#newResFormWrap").toggle(0, function (){
            $("#newResForm").animate({ opacity: 100 },400);
        });
    });
} else { //if visible
    console.log('click');
    $("#newResForm").animate({ opacity: 0 }, 0, function() {
        console.log('animated');
        $("#newResFormWrap").toggle(0)
    });
    $("#addRes").animate({ opacity: 100 }, 'fast');
}