2012-09-06 80 views
1

我在这个页面上使用了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; 
} 
+1

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

+0

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

回答

1

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

阅读更多关于它的地方:(关于队列的部分)。

相关问题