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

score 75 · Accepted Answer · edited Dec 07 '12 at 03:57

75

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

edited Dec 07 '12 at 03:57

squarecandy

4,894
3
34
45

answered Sep 08 '11 at 15:14

Blazemonger

90,923
26
142
180

This works but if you call it again, the fade zips by. I reckon one needs to clear the animation queue or something? – Umar Farooq Khawaja Dec 12 '12 at 22:58

Sander · Answer 2 · 2011-09-23T06:09:31.630

58

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/

edited Sep 23 '11 at 06:09

answered Sep 22 '11 at 00:25

Sander

13,301
15
72
97

come on, justify the downvote, this is a mutch better way to fadeOut than doing it manually with the animate command, if not then i am missing something here and i would like to know what – Sander Sep 22 '11 at 06:30
35

fadeIn'ing out makes it's display to none therefore you lose its height where visibility to hidden it's there but not visible. Check it here: http://jsfiddle.net/ufLwy/ – jQuerybeast Sep 22 '11 at 21:05
3

blazemonger's solution also works, but this fadeTo zero solution is much more elegant. – squarecandy Dec 07 '12 at 03:57
3

This will hide an element not make it invisible – kimbarcelona Oct 09 '15 at 04:27

score 8 · Answer 3 · edited Dec 06 '22 at 14:55

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

fadeIn() / fadeOut() uses 'display' which F's up an element's height
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.
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 );
}

score 8 · Answer 4 · answered Sep 24 '15 at 11:02

8

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

answered Sep 24 '15 at 11:02

Miguel Higuera Romero

81
1
2

Thanks for good solution @Miguel Higuera Romero. It helped me to add visibility in animate. – Ana DEV Feb 04 '16 at 09:20

score 1 · Answer 5 · edited Apr 24 '15 at 03:49

1

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);

edited Apr 24 '15 at 03:49

user229044

232,980
40
330
338

answered Mar 11 '15 at 17:05

codingforpassion

11
1

score 0 · Answer 6 · answered May 11 '23 at 16:51

0

Tried all the answers but nothing worked well. So tried below code which worked for me.

$('.drop1').css('visibility', 'visible').animate({
  opacity: 0
}, 200, function() {
  $(this).css('visibility', 'hidden');
});

answered May 11 '23 at 16:51

Akshay

926
9
21

score -2 · Answer 7 · edited Mar 11 '15 at 18:05

-2

.drop1{ opacity: 0.0; }

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

edited Mar 11 '15 at 18:05

isherwood

58,414
16
114
157

answered Mar 04 '14 at 03:28

Scott Cleland

135
1
6

jQuery css Visibility with animation

7 Answers7

Linked

Related