Jquery淡入效果

Question

我正在尝试更改img src，然后将opacity设置为0然后淡入。

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

这适用于

.css({opacity:0})

意味着它确实将不透明度设置为0，但淡入淡出永远不会发生。

Answer 1

问题是由于结合fadeIn（）使用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解释为表示不显示，而不是不透明度。

Answer 2

不透明度值为0使对象完全透明。因此，当fadeIn（）工作时，它会在透明对象中淡出。

Answer 3

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