如何防止这种奇怪的jQuery .animate()滞后? [英] How to prevent this strange jQuery .animate() lag?

问题描述

请参阅演示: jsFiddle

• 我有一个简单的表单，可在单击显示"/取消"时进行切换
• 一切正常，但是如果您在表单显示后不久单击取消"，则动画开始前会有2-3秒的延迟.
• 如果您在单击取消"之前等待几秒钟，则不会发生这种情况.
• 在所有经过测试的浏览器(例如ff，chrome)中都会出现延迟.

• I have a simple form that is being toggled when clicking 'show' / 'cancel'
• Everything works fine, but if you click 'cancel' shortly after the form is revealed, there's a good 2-3 seconds lag before the animation even begins.
• This doesn't happen if you wait a few seconds before clicking 'cancel'.
• The lag occures in all tested browsers (ie, 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 });
            });
        });
    }
}

推荐答案

使用stop()开始新动画时，请确保清除队列:

Make sure to clear the queue when starting a new animation with 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()开始所有动画链是一个好习惯，除非您知道您希望它们与可能在其他地方发生的先前动画排在一起.

What's causing the lag is the fact that your long 2-second animation $("#newResForm").animate({ opacity: 100 },2000) isn't finished yet. JQuery puts animations by default into a queue, waiting for one to finish before the next begins. You clear the queue with stop(), which is especially useful if you have two contradicting animations (like an open and close animation, or a mouseover/mouseout animation). In fact you might find it a good practice to begin all your animation chains with stop() unless you know you want them to queue with prior animations that may have occurred elsewhere.

进入更高级的主题，您甚至可以命名不同的队列，例如，出于stop()的目的，例如，将悬停动画和展开/折叠动画分别对待.请在 http://api.jquery.com/animate/了解更多信息.

Getting into more advanced topics, you can even name different queues, so that for example your hover animations and your expand/collapse animations are treated separately for the purposes of stop(). See the queue option (when given a string) at http://api.jquery.com/animate/ for more details.

这篇关于如何防止这种奇怪的jQuery .animate()滞后?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！