How to animate "visibility: hidden"?

Question

here is my problem ... can you help me?

$(".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); }); 

He only animates when he appears .: - (

Answer 1

Try as follows:

 $(".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 for fadeIn and fadeOut . Instead, you can use methods with the names jQuery provides, 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 the duration , which should achieve your goals.

Answer 4

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

In order for any animation to work, regardless of whether it was performed with key frames, transitions or jquery, the start point and end point of the set of property values ​​must be divided into several stages, with a large number of steps leading to a smoother animation.

For a simple effect like transition , it is best to see the fiddle here . Use javascript only 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, which defines the property for the transition, and then the length, the convenience function (which describes the changes in speed that the animation affects). You also need to define the start point and end point for your animated property, as you can see with two opacity values.

For recording - a keyframe is suitable if your effect was more complex, for example, so that one property is fully animated halfway, and then animated back, and the other fully or completely; and jQuery animation provides an easy way to act upon completion of the animation, which is also sometimes necessary.

Answer 5

This is because it is deleted before it revives the camera. First you need to animate the fading, and then apply visibility: hidden after the animation finishes.

There are several ways to do this: the browser fires an animationend event (it is biased for different browsers - see more information here), or you can use a better animation library than jQuery animation (for example, 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 6

Why use jQuery for this? It is much more efficient to use CSS, for example:

 .fade { width:100px; height:100px; background-color:darkgray; opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .fade:hover { opacity: 0; } 

 <div class="fade"></div>