如何为“可见性:隐藏"设置动画? [英] How to animate "visibility: hidden"?

问题描述

这是我的问题...您能帮我吗?

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. :-(

推荐答案

尝试这种方式:

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

但是，这不是fadeIn和fadeOut的最佳选择.您可以改用具有jQuery提供的名称的方法，或者最好使用CSS过渡.

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.

这篇关于如何为“可见性:隐藏"设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！