jQuery .animate() 在执行前无意中等待了几秒钟答案

【问题标题】：jQuery .animate() unintentionally waits a few seconds before executingjQuery .animate() 在执行前无意中等待了几秒钟
【发布时间】：2012-09-06 22:58:05
【问题描述】：

我在整个页面上都使用了 jQuery .animate，一切都非常好，除了这一行，它在用户单击消息后向用户隐藏了“目标已完成”消息。我包括了整个函数，尽管奥秘在于动画命令的链式行。我将.animate() 用于优雅的东西，然后在对象不在用户视线范围内时使用快速而肮脏的.css()...似乎无论我如何调整，这个 div 都不会动画，直到拖延了很久……

我已经尝试过的东西：

1) 将 jQuery 命令链分离为一次一个： --> 结果：所有动画同时执行，除了第一个动画在执行前仍然等待 8 秒

2) 与编写的代码完全相同，但在页面其他地方的随机 div 中切换 besdies "#kbm" 这显然是我真正想要隐藏的 --> 结果：新选择的 div 行为正常，所有动画都按正确的顺序及时发生

3) 重新排列 HTML 中元素的顺序

4) 尝试使用position: relative 而不是absolute

5 ) 从脚本中删除 .css 命令并仅使用 .animate 处理所有内容

JAVASCRIPT：

function loadnextpage(response)
{

    word = response["word"];
    imgarray = response["imgarray"];
    loadgame();

    $("#kbm").animate({"top": "-340"},500,function(){
        $("#kbm").css("top","-1000px");
        $(".key").animate({"left": "0px"},1000,function(){
            $("#keyboard").css("overflow", "visible");
        });
    });

}

HTML：

<body>
<div id="pagec">

    <div id="mainc">
        <div id="wordpic"><div id="wordpicbg" class="bg"></div></div>
        <div id="wordblanks"><div id="wordblankbg" class="bg"></div></div>
        <div id="keyboard">
            <div id="keyboardbg" class="bg"></div>
            <div id="kbm"><img src="i/medal.png"><img src="i/arrow.png" id="arrow" onclick="loadnext()"></div>
        </div>
    </div>
</div>
</body>

CSS：

#kbm
{
    display: inline-block;
    position: absolute;
    left: 340px;
    top: -1000px;
    width: 500px;
    height: 340px;
}

【问题讨论】：

`似乎无论我如何调整，这个 div 都不会动画，直到经过长时间的延迟...`那是哪个 div？
#kbm -- 但我认为我已经通过将 .stop() 添加到所有动画命令来解决这个问题。不幸的是，我仍然不知道为什么会这样！

标签： jquery jquery-animate delay

【解决方案1】：

.stop() 阻止了这种行为，因为动画队列在移动到下一个动画之前被清除。动画时间和内置延迟（使用 .delay()）可以总结为动画提示的延迟，尤其是在为许多元素设置动画时。

在此处了解更多信息：http://api.jquery.com/animate/（关于队列的部分）。

【讨论】：