16

见演示：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 });
            });
        });
    }
}
4

4 回答 4

36

确保在使用以下命令开始新动画时清除队列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上的选项（当给定字符串时） 。

于 2013-01-30T20:52:31.237 回答
1

.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() {
            /...
        });
    }
}
于 2013-01-30T20:51:44.247 回答
1

尝试使用stop()：

这是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);
        });
    });
}
于 2013-01-30T20:54:15.753 回答
1

几件事。首先查看这个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');
}
于 2013-01-30T21:04:17.187 回答