Question

I have a DIV which is created dynamically in javascript code with the following style set:

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;

I want to fadeIn the DIV using Jquery, but it doesn’t work. The DIV still has opacity:0. I can’t use fadeOut on the div because it is created dynamically and I need to fadeIn immediately after the image in the DIV has been loaded.

Is there any solution for this problem.

Answer 1

Just reset the CSS manually and then fade it in:

$("#myDiv").css({"-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)", "-moz-opacity": 1, "-khtml-opacity": 1, "opacity": 1, "visibility": hidden}).fadeOut(0, function(){

     $(this).css({"visibility": "visible"}).fadeIn();
})

I use this a lot for things I need to start out hidden and then fade in.