Jquery fadeIn leaves opacity at 0

Question

I have this weird behavior with .fadeIn()

If i write

 $('#MyDiv').show(); 

Div shows great.

However, if I write

 $('#MyDiv').fadeIn(400); 

Div shows, but with opacity 0 !

Line to:

 $('#MyDiv').hide() .html(TheHTML) .css('top', 0); 

UPDATE: if I write $('#MyDiv').show(400);

div also remains at opacity 0 .

Answer 1

Some CSS overrides your div when it is hidden. Remove the opacity style for your div as 100.

Else do

 $('#MyDiv').css('opacity','100'); 

after your call to fadeIn.

Answer 2

Try jQuery . fadeTo .

 .fadeTo( duration, opacity [, callback] ) .fadeTo( duration, opacity [, easing] [, callback] ) 

Example:

 $('#book').fadeTo('slow', 0.5, function() { // Animation complete. }); 

Answer 3

The following will make it visible as you want

 $('#MyDiv').animate({ opacity: 1 },400); 

You can try the following:

 $('#MyDiv').fadeIn(400, function(){ $(this).css('opacity', 1) }); 

Demo

But I think yours should work fine too. See here

Answer 4

Check if you have

 opacity: 0 !important; //or opacity: 0; 

In your css in this case you have to manually change the opacity yourself, like this

 $('#MyDiv').fadeIn(400,function(){ $(this).css('opacity',1); }); 

Note fiddle . The first div will never appear.