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

Posted 2023-05-08

【中文标题】如何防止这种奇怪的 jQuery .animate() 滞后？

【英文标题】：How to prevent this strange jQuery .animate() lag?

【发布时间】：2013-01-14 19:54:08

【问题描述】：

查看演示：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 );
            );
        );
    

【参考方案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 选项（当给定字符串时）。

【讨论】：

注意.stop()不会清空队列，只是停止当前正在运行的动画。在某些情况下，您可能需要运行 .stop(true) 来进一步清除所有排队的动画，或者甚至运行 .stop(true, true) 来进一步将当前动画立即完成到终点。有关info page 的更多信息。就我而言，只有后者有效。

【参考方案2】：

尝试使用stop()：

Here is jsfiddle.

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);
        );
    );

【参考方案3】：

几件事。首先查看此JSFiddle 以了解它的实际效果。

您遇到的问题是您的动画淡入淡出需要 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');

【讨论】：

我猜上面提到的stop()方法也是解决方案中的一个重要因素。。不过谢谢你的回复

【参考方案4】：

在您的动画调用之前添加.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() 
            /...
        );
    

【讨论】：

首先，这行得通（将在 10 分钟内接受），但是，为什么还需要它呢？我可以清楚地看到动画已经完成了

@Roy 参加了一个小型会议 ;)