在jQuery中簡單的淡入淡出和可見性

Question

我試圖用jQuery .fadeIn()轉換將div的css屬性visibility更改爲visible。

這裏是我的代碼：

$('a').click(function() { 
    $('#test').fadeIn('slow', function() { 
    $(this).css('visibility','visible'); 
    }); 
});​ 

和小提琴：http://jsfiddle.net/np6r7/

Answer 1

你不能動畫visibility。 fadein被關閉display:none;，所以應該是#test的初始狀態通過CSS。如果您需要保持佈局，您可以嘗試在指定您需要的高度和/或寬度的div中包裝測試。

Answer 2

其實我喜歡davidaam的回答。我會作出輕微修改：

$('#test').css('visibility','visible').hide().fadeIn("slow"); 

Answer 3

你也可以使用CSS透明度與jQuery的淡入相結合，實現同樣的事情。

而是在你的CSS使用的知名度，使用opacity: 0; 然後使用jQuery FadeTo增加不透明度爲100％：

$('#test').fadeTo('slow', 1);

這將保留定位類似的知名度確實，但是，重要的是要注意即opacity: 0響應諸如點擊和按鍵以及參與制表的事件。此外，我還讀了負責使用visibility: hidden而不是display: none是更好的搜索引擎優化，但我不知道這如何適用於opacity: 0。

的jsfiddle：http://jsfiddle.net/np6r7/15/