jQuery css Visibility with animation

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 wor开发者_如何转开发k.

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

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

why make it so hard, instead of animating the css, you could use the default fade functionality

$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);

edit

if you however want to fade it out without losing the height . you can use fadeTo(duration, opacity, [callback]);

$('.drop1').fadeTo(200, 0);

check this example: http://jsfiddle.net/ufLwy/1/

I had a similar problem and I solved it this way:

To fade in :

$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);

To fade out:

$("#id").animate({opacity: 0.0}, 200, function(){
    $("#"+txtid).css("visibility","hidden");
});

As you can see, I hide the div "#id" once the animation has ended. I hope it's not too late

I was having similar issues, and here's what I ended up doing.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 )
    ).done( function(){
        $( selector ).css('visibility', 'hidden')
        complete();
    });
}

The reason I did this is that

1. fadeIn() / fadeOut() uses 'display' which F's up an element's height
2. fadeTo doesn't affect visibility, so while the element is visually hidden with opacity:0, users are still able to interact (i.e. click) the invisible element.
3. animate() is asynchronous so chaining CSS at the end doesn't guarantee that it will run when the animation is complete. Only by using the Deferred object that animations return ($.when() / $.done()) will you be guaranteed that the CSS is applied after all animations are complete.

EDIT Alternatively, you could apply to visibility:hidden to each individual element once their respective animation is complete. This may be slightly quicker for selecting larger groups of elements, since you're only querying the DOM for the group of elements once.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 , function(){ 
            $(this).css('visibility', 'hidden');
        } )
    ).done( complete );
}

I know this is an old post but I came across a similar situation and this is what I ended up doing

$(".drop1").css("visibility", "visible").show().fadeOut(5000);

.drop1{ opacity: 0.0; }

$('.drop1').fadeTo( "slow" , 1.0);