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（）無意中等待幾秒鐘後才執行

回答

相關問題