CODEWITHSUNDEEP
jquery
james
james

Reputation: 2663

Jquery fade in not working

I am trying to change an img src then set opacity to 0 then fade in.

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

This works up to the 

.css({opacity:0})

Meaning it does set the opacity to 0,but the fade never happens.

Upvotes: 3

Views: 5060

Answers (3)

zeman
zeman

Reputation: 29

If you want to fade opacity then use .fadeTo("slow", 1); instead. Hiding the element will reflow the page and move content around so use this if you want everything to remain in position.

Upvotes: 1

shelhamer
shelhamer

Reputation: 31170

The problem is caused by using CSS opacity of zero in combination with fadeIn(). To hide the element and then fadeIn(), you should use .css({display: 'none'}) or .hide() followed by fadeIn(), like so:

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

or

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

The purpose of fadeIn() is to show a "hidden" element, "hidden" interpreted by jQuery to mean not displayed, and not with zero opacity.

Upvotes: 8

joseph
joseph

Reputation: 780

An opacity value of 0 makes the object completely transparent. So when the fadeIn() works, it's fading in a transparent object.

Upvotes: 3

Related Questions