如何动画 "visibility: hidden"？

Question

这是我的问题...你能帮帮我吗？

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

它只有在出现时才会动画。 :-(

Answer 1

试试这个方法：

$(".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 转换，以防万一。

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

使用fadeIn/fadeOut

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

您可以传入 duration 应该可以实现您的目标

Answer 4

那是因为它在动画之前被删除了。您需要先为淡出设置动画，然后在动画完成后应用 visibility: hidden。

有几种方法可以做到这一点：浏览器引发一个事件 animationend（这是各种浏览器的前缀——更多信息请参见此处）或者您可以使用比 jQuery 动画（如 Green Sock TweenLite -- http://greensock.com/tweenlite）来处理你的动画，这使得动画结束时的运行代码变得微不足道。

Answer 5

CSS 中的可见性属性是布尔值，可以打开或关闭。

为了使任何动画正常工作，无论是使用关键帧、过渡还是 jquery，属性值集的起点和终点都需要分解为一组步数，步数越多，动画越流畅。

对于像这样的简单效果，transition is best, please see the fiddle here。使用 javascript 只是添加/删除触发转换

的类

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

.show-me {
    opacity: 1;
}

您设置过渡属性定义属性过渡，然后是长度，要使用的缓动函数（它描述了动画效果的速率变化）。您还需要为动画属性定义起点和终点，正如您在两个不透明度值中看到的那样。

郑重声明 - 如果您的效果更复杂，则关键帧是合适的，例如希望一个属性在中途完全动画化，然后再向后动画化，而另一个则需要全部时间，或者振荡; JQuery animate 提供了一种简单的方法来对动画的结束进行操作，这有时也是必要的。

如何动画 "visibility: hidden"？

How to animate "visibility: hidden"?

jquery

html

css

jquery-animate

visibility