jQuery的淡入不工作

Question

我試圖改變IMG SRC然後設置不透明度爲0，然後褪色。

$("#featureImg").attr('src','07.jpg').css({opacity:0}).fadeIn("slow"); 

這個工程到

.css({opacity:0}) 

這意味着它設置不透明度爲0，但淡化從未發生。

Answer 1

這個問題是由於將fadeIn（）與CSS不透明度組合使用而引起的。要隱藏元素，然後淡入（），則應該使用的CSS（{顯示： '無'}）或.hide（），隨後淡入（），像這樣：

$("#featureImg").attr('src','07.jpg').css({display:'none'}).fadeIn("slow"); 

或

$("#featureImg").attr('src','07.jpg').hide().fadeIn("slow"); 

fadeIn（）的目的是顯示一個「隱藏」元素，「隱藏」由jQuery解釋爲不顯示，而不是零不透明。

Answer 2

不透明度值爲0使對象完全透明。所以當fadeIn（）工作時，它在一個透明對象中消失。

Answer 3

如果您想淡化不透明度，請改爲使用.fadeTo("slow", 1);。隱藏元素將重排頁面並移動內容，所以如果希望所有內容都保持原位，請使用此內容。