How to animate "visibility: hidden"?

Question

here is my problem... Can you help me please?

$(".button").hover(function(){
  $('.class').css({opacity: 1.0, visibility: "hidden"}).animate({opacity: 0}, 1200);
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

It only animates when it is appearing. :-(

Answer 1

Try this way:

$(".button").hover(function(){
  $('.class').css("opacity", "1.0").animate({opacity: 0}, 1200, function(){
    $('.class').css("visibility", "hidden");
});
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

However, this is not the best option to fadeIn and fadeOut. You can use instead the methods with those names that jQuery provide, or better, use CSS transitions in case you can.

Answer 2

$(".button").hover(function(){
    $('.class').css({opacity: 1.0, visibility: "visible"}).animate( //start off from opacity 1 and visibile
        {opacity: 0}, //then animate opacity to 0
        1200, 
        function(){ //this will be run after the animation is completed
            $(this).css({
                visiblity:"hidden" //so it will be hidden only after the animation has completed
            });
        }
    );
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

Answer 3

Use fadeIn/fadeOut

$(".button").hover(function(){
  $('.class').fadeOut(1200);
},function(){
  $('.class').fadeIn(1200);
});

You can pass in duration which should achieve your goals

Answer 4

That is because it is removed before it cam animate. You would need to animate the fade out first, then apply visibility: hidden after the animation is complete.

There are a couple of ways to do this: The browser raises an event animationend (this is prexied for various browsers -- see here for more info) or you can use a better animation library than jQuery animate (like Green Sock TweenLite -- http://greensock.com/tweenlite) to handle your animation, which makes it trivial to run code at the end of the animation.

Answer 5

The visibility property in CSS is Boolean, either on or off.

In order to any animation to work, whether it's done with keyframes, transitions or jquery, the start point and end point of the property value set need to broken down into a set of steps, with a greater number of steps resulting in a smoother animation.

For a simple effect like this, a transition is best, please see the fiddle here. Use javascript just to add / remove classes that trigger the transition

.hidden {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.show-me {
    opacity: 1;
}

You set the transition property defining the property to transition, then the length, the ease function to use (which describes changes to the rate at which the animation has effect). You also need to define the start point and end point for your animated property as you can see with the two opacity values.

For the record - a keyframe is appropriate if your effect was more complex, like wanting one property to have fully animated half way through and then to animate back while another to take the full time, or for oscillations; and JQuery animate provides an easy way to act on the conclusion of an animation which is also sometimes necessary.