jQuery .animate（）无意中等待几秒钟后才执行

我在这个页面上使用了jQuery .animate，并且所有的工作都非常棒，除了这一行，在用户之后向用户隐藏了“目标完成”消息点击消息。我包含了整个功能，尽管这个谜团是在动画命令的链接中。我使用.animate()作为优雅的东西，然后快速肮脏的.css()一旦对象不在用户的视线之内......看起来像是不管我调整了什么，这一个div只是不会动画，直到长时间延迟通过......jQuery .animate（）无意中等待几秒钟后才执行

的东西，我已经试过不已：

1）分离出的jQuery链命令一个-AT-A-时间： - > 结果：所有动画的同时进行除了第一个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; 
}

来源

2012-09-06 pinhead

'似乎无论我调整了什么，这一个div只是不会动画，直到长时间的延迟已经过去......这是什么div？ – Nope

#kbm - 但我想我已经通过将.stop（）添加到所有动画命令来解决此问题。不幸的是，我仍然不知道为什么这个工作！ – pinhead

.stop（）防止此问题，因为动画队列移动到下一个动画之前清除。动画时间和内置延迟（使用.delay（））可以归结为动画提示中的延迟，特别是在动画制作多个元素时。

阅读更多关于它的地方：（关于队列的部分）。

来源

2012-09-06 23:17:28 Sutuma

jQuery .animate（）无意中等待几秒钟后才执行

回答

相关问题