消除項目中淡化的延遲

如果您看到this JSFiddle here，我只是試圖在按鈕/鏈接中設置動畫效果，儘管以某種方式。我希望鏈接仍然適用於佈局，以便佈局完全不會改變。消除項目中淡化的延遲

我的HTML：

<p> 
    <a id="helloWorld" href="#" class="btn primary large">Hello, World! &raquo;</a> 
    Fork this to get hacking on <span class="label stark">Bootstrap</span> and <span class="label stark">jQuery</span>. 
</p>

我的CSS：

#helloWorld { 
    visibility: hidden; 
}

我的jQuery：

$("#helloWorld") 
    .delay(1000) // after a second 
    .css("visibility", "visible") // make it 'visible 
    .hide() // but hide it 
    .fadeIn(500); // then fade it in

我要做visibility:visible然後hide()破解as noted here。奇怪的是，如果我完全禁用JavaScript，鏈接通常會佔用空間。如果我啓用了JavaScript，那麼佈局會變得混亂。看起來由於某種原因，它在執行css()和hide()之前延遲結束！我究竟做錯了什麼？

來源

2011-11-21 Naftuli Kay

你的代碼不工作的原因是因爲.delay（）不能像JavaScript的setTimeout一樣工作。查看http://api.jquery.com/delay/瞭解更多相關文檔。

試試這個修復：

setTimeout(function() { 
    $("#helloWorld").css("visibility", "visible").hide().fadeIn(500); 
}, 1000);

這裏是的jsfiddle：http://jsfiddle.net/7LGrS/2/

來源

2011-11-21 08:24:17

因此，說'delay（）'只適用於其他動畫，但不適用於其他jQuery操作？這就是爲什麼我的代碼不工作？ –

是的，'.delay（）'適用於jQuery的'fx'隊列。其他的jQuery操作不使用'fx'隊列，所以'delay（）'在那裏是沒用的。 –

<a style='display:none; ' id="helloWorld" href="#" class="btn primary large"> 
Hello, World! &raquo; 
</a> 

just add the style to the anchor

來源

2011-11-21 06:37:23

但後來它不佔據任何佈局空間？ –

用明確的寬度和高度創建一個大小相同的div。然後，放下錨點。 –

這並不能解釋爲什麼我的腳本無法正常工作。 –

消除項目中淡化的延遲

回答

相關問題