Question

我在整个页面上都使用了jQuery .animate，除了这一行之外，一切都运行得非常好，在用户点击消息后，它会向用户隐藏“目标已完成”消息。我包括整个功能，虽然神秘的是动画命令的链接线。我正在使用.animate()来获得优雅的东西，然后在对象看不到用户的情况下快速而肮脏.css() ......似乎无论我调整什么，这个div只是在长时间的延迟过后才会动画......

我已经尝试过的东西：

1）将jQuery命令链分离为一次一个： - ＆GT; 结果：所有动画同时执行，除了第一个STILL在执行前等待8秒

2）与写入完全相同的代码，但在页面上的其他地方切换随机div besdies“#kbm”这显然是我真正想要隐藏的那个 - ＆GT; 结果：新选择的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;
}

Answer 1

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

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

jQuery .animate（）在执行前无意中等待了几秒钟

1 个答案: