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.

if an element has opacity:0 === is not visible. But you say: "**The div shows but with opacity 0!**" I really don't understand — Roko C. Buljan, Jun 01 '12 at 06:21
Where does `TheHTML` come from ? The problem certainly comes from somewhere else, like maybe your div is empty so its height and width is equal to 0 or something like that — romainberger, Jun 01 '12 at 06:23

score 6 · Accepted Answer · edited Apr 05 '20 at 09:41

6

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...

edited Apr 05 '20 at 09:41

Henry Howeson

answered Jun 01 '12 at 06:19

Kabilan S

11

CSS opacity value is 0 to 1. 100? A little bit big. – designermonkey Jan 16 '13 at 23:30

score 6 · Answer 2 · answered Jun 01 '12 at 06:37

6

Try jQuery .fadeTo function.

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

Sample:

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

answered Jun 01 '12 at 06:37

Tooraj Jam

score 2 · Answer 3 · edited Jun 23 '13 at 02:50

2

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)
});

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

edited Jun 23 '13 at 02:50

David Titarenco

answered Jun 01 '12 at 06:13

thecodeparadox

1

Doesn't `fadeIn` animates opacity itself? So maybe the problem is somewhere else. – Prasenjit Kumar Nag Jun 01 '12 at 06:16

score 0 · Answer 4 · answered Jun 01 '12 at 06:22

Check if you have a

opacity: 0 !important;

//or

opacity: 0;

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

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

Check this fiddle. First div will never appear.

4 Answers4