1

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

我已经尝试过的东西：

1) 将 jQuery 命令链分离为一次一个：--> 结果：所有动画同时执行，除了第一个动画在执行前 STILL 等待 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;
}
4

1 回答 1

1

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

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

于 2012-09-06T23:17:28.970 回答