如何为“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);
});

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

- Ondřej Moldan

---

你为什么要用 jQuery 做这个？这只是一个简单的 CSS 过渡效果，完全没有必要使用 jQuery 来实现鼠标悬停按钮的效果。 - Sean Stopnik

这个问题的答案非常明显，我们应该预计在实际开发中会看到很多低效的jQuery代码。@AmmarCSE的答案是你在生产环境中想要的（尽管其他答案可能会教你一些关于jQuery行为的知识）。 - holdenweb

@holdenweb 不，生产环境中您会想要一个基于CSS的解决方案，就像我在答案中展示的那样。 - connexo

啊，说得好，尽管公平地说，你的答案当时还没有发布。我应该说的是，在自己发明之前，要“努力寻找jQuery方法来实现你想要的”（这也能提高你的jQuery技能）。你非常正确地建议了一种基于CSS的声明性解决方案，完全不涉及Javascript。谢谢！ - holdenweb

我也忽略了它：当鼠标悬停在.button上时，OP想要淡入/淡出另一个元素.class。 - connexo

@connexo 是的，我编辑了我的答案，展示了如何仍然使用过渡来完成，这种方式可能比使用jQuery函数更清晰、更好地分离和更有效率。 :-) - Toni Leigh

Answer 1

CSS中的visibility属性是布尔类型，只有开或关两种状态。

为了让任何动画（无论是用关键帧、转换还是jquery完成）正常工作，需要将属性值集的起始点和结束点分解成一组步骤，步骤数量越多，动画越平滑。

对于这样一个简单的效果，最好使用转换，请在此处查看实例。只需使用JavaScript添加/删除触发转换的类即可。

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

.show-me {
    opacity: 1;
}

您需要设置转换属性来定义要进行转换的属性，然后是长度，缓动函数（描述动画生效速率的变化）。您还需要定义动画属性的起点和终点，就像两个不透明度值一样。

顺带一提，如果您的效果更加复杂，例如想让一个属性在一半处完全动画化，然后再反弹回来，或者用于振荡，那么关键帧是适当的选择；而JQuery animate则提供了一种简单的方式来对动画完成时采取行动，这也有时是必要的。

- Toni Leigh

---

我也忽略了：当鼠标悬停在.button上时，OP想要淡入/淡出另一个元素.class。 - connexo

Answer 2

试试这样做：

$(".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 过渡效果。

- lmgonzalves

Answer 3

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

- Okku

Answer 4

使用fadeIn/fadeOut

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

您可以传入duration，以实现您的目标

- AmmarCSE

---

对于 display:none 和 display:block 的区别 - Weijing Jay Lin

Answer 5

这是因为在动画之前它被移除了。您需要先对淡出进行动画处理，然后在动画完成后应用visibility: hidden。

有几种方法可以实现这一点：浏览器会触发一个animationend事件（这是针对各种浏览器的前缀--请参见此处以获取更多信息），或者您可以使用比jQuery animate更好的动画库（如Green Sock TweenLite -- http://greensock.com/tweenlite）来处理您的动画，这使得在动画结束时运行代码变得轻而易举。

- Jeff Clarke