Question

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.

Answer 1

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.