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

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.

Answer 2

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.