CODEWITHSUNDEEP
javascriptjquerycss
Liron Harel
Liron Harel

Reputation: 11247

Jquery fadeIn() on a DIV with already set opacity style

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.

Upvotes: 0

Views: 1039

Answers (4)

StephenRios
StephenRios

Reputation: 2232

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.

Upvotes: 1

karacas
karacas

Reputation: 2132

You can use liveQuery (jquery plugin): https://github.com/brandonaaron/livequery

"Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated."

$('.someClass').livequery(function() { 
    /*a .someClass is created*/
    $(this).fadeIn();
});

liveQuery works nice!

Upvotes: 0

Tom Leslie
Tom Leslie

Reputation: 13

You could try loading the image with display: none instead of messing with the opacity, then fade it in.

Upvotes: 0

Evan Davis
Evan Davis

Reputation: 36592

Use animate instead.

$('#your_div_id').animate({opacity: 1});

Upvotes: 0

Related Questions