我在这个页面上使用了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;
}
'似乎无论我调整了什么,这一个div只是不会动画,直到长时间的延迟已经过去......这是什么div? – Nope
#kbm - 但我想我已经通过将.stop()添加到所有动画命令来解决此问题。不幸的是,我仍然不知道为什么这个工作! – pinhead