javascript - jQuery css Visibility with animation

Question

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 1

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