Jquery淡入效果无法正常工作

Question

我正在尝试更改img的src，然后将不透明度设置为0，然后淡入。

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

这可以工作，直到

。

.css({opacity:0})

意思是它确实将不透明度设置为0，但是淡出效果从未发生。

- james

Answer 1

问题是由使用CSS不透明度为零与fadeIn（）相结合引起的。要隐藏元素，然后淡入，您应该使用.css（{display：'none'}）或.hide（），然后再使用fadeIn（），如下所示：

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

或者

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

fadeIn() 的目的是显示一个“隐藏”的元素，jQuery 中的“隐藏”指的是未显示且不透明度不为零。

- shelhamer

---

@shelhameer，如果是这样的话，你可以使用.hide().fadeIn()。 - kobe

@kobe，我在我的回答文本中包含了.hide()，但没有放在代码示例中。因为你提到了它，所以我已经添加了它。谢谢。 - shelhamer

Answer 2

透明度值为0意味着对象完全透明。因此，当fadeIn（）起作用时，它将淡入一个透明的对象。

- joseph

Answer 3

如果您想淡化透明度，请使用.fadeTo("slow", 1);。隐藏元素将重新布局页面并移动内容，因此如果您希望所有内容保持在原位，请使用此选项。

- zeman