jQuery css Visibility with animation

javascript jquery css animation visibility
jQuerybeast picture jQuerybeast · Sep 8, 2011 · Viewed 84.5k times · Source

I have few div's placed underneath each other and I'm using css visibility to fade them in and out. The reason why I use visibility is so that the div's don't move place.

For fade In I'm using: 

$('.drop1').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});

and for fade Out I'm using:

$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);

The FadeIn works, but the fadeOut doesn't work.

Now, you may think that the problem is the last ',200' but I will need to use that as a delay since the fadeout/visibility:hidden is on mouseleave event after 200ms.

So my question is: How can I do the visibility hidden with animation to act as a fadeOut.

Thanks alot

Answer

Blazemonger picture Blazemonger · Sep 8, 2011

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

Related questions

How to build simple jQuery image slider with sliding or opacity effect?

Some of us might not want to use ready plugins because of their high sizes and possibilty of creating conflicts with current javascript. I was using light slider plugins before but when customer gives modular revise, it became really hard …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More