CODEWITHSUNDEEP
jqueryhtml
automaton
automaton

Reputation: 3108

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 don't want to set display back to block, as if I do it just re-appears instantly instead of fading.. any ideas?

Upvotes: 13

Views: 38970

Answers (5)

Avatar
Avatar

Reputation: 15166

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

Upvotes: 1

Ash
Ash

Reputation: 444

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.

Upvotes: 6

Enes Tanrıöver
Enes Tanrıöver

Reputation: 158

Just add speed option;

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

It working for me...

Upvotes: 1

Jose Faeti
Jose Faeti

Reputation: 12302

Try 

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

instead of 

display:none;

Upvotes: 4

Felix Kling
Felix Kling

Reputation: 816364

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?

Upvotes: 22

Related Questions