jquery fadeIn leaves opacity at 0

Question

I have this weird behavior with .fadeIn()

If I write

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

The div shows just fine.

However, if I write

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

The div shows but with opacity 0!

The line before is:

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

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

The div also stays at opacity 0.

Answer 1

Some CSS is overriding your div when it is hidden..Better add the opacity style to your div as 1.

Else do,

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

After your fadeIn call...

Answer 2

Try jQuery .fadeTo function.

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

Sample:

$('#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 following:

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

DEMO

But I think your should also work just fine. See here