Jquery Fadein() On Display None

I have a div where I did a $('#div').css('display', 'none'); Now, to bring this item back, I want to fade it in. However, it seems like $('#div').fadeIn() is not doing it, but I do

Solution 1:

Try

$('#div').hide();

to hide the element.

Update: I suggested this because I came a problem with setting .css('display', 'none') on the body in Firefox. But it should work for other elements.

But if it does not work with hide() then you definitely have another problem and you have to post more code or provide a demo.

In which browser does it fail? Are you sure $('#div').fadeIn() is executed?

Solution 2:

4 years too late but im hoping this will at least help someone out.

You need to first change the CSS class using jquery to visibility:hidden and then apply the fade in function. You can chain these within the same function or run them seperately. Either way you should see the element just fade back into existance as expected.

Solution 3:

Try

$('#div').hide();

instead of

display:none;

Solution 4:

Just add speed option;

$('#div').fadeIn(1000);

It working for me...

Solution 5:

I had a similar problem caused by CSS set to the element and its :hover state.

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

I removed those lines above and finally jquery's fadeIn() worked flawlessly.

Also make sure that you do not use display:none !important;

And yes, you only need to set CSS display:none; and then use fadeIn().