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

CSS中的visibility属性是布尔值，无论是打开还是关闭。

为了使任何动画能够工作，无论它是用关键帧，转换还是jquery完成的，属性值集的起点和终点都需要分解为一组步骤，数量更多步骤导致动画更流畅。

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

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

.show-me {
    opacity: 1;
}

您可以设置定义要转换的属性的过渡属性，然后设置长度，要使用的缓动函数（它描述动画生效率的变化）。您还需要为动画属性定义起点和终点，如您可以看到两个不透明度值。

对于记录 - 如果你的效果更复杂，关键帧是合适的，例如想要一个属性在中途完全动画，然后再动画回来，而另一个属性需要全部时间，或者用于振荡;和JQuery动画提供了一种简单的方法来处理动画的结论，这有时也是必要的。

Answer 4

使用fadeIn / fadeOut

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

您可以传递duration来实现您的目标

Answer 5

这是因为它在凸轮动画之前被删除了。您需要先设置淡出动画，然后在动画完成后应用NewText = %NewText%%ColorNumber%%thisChar%。

有几种方法可以做到这一点：浏览器引发一个事件visibility: hidden（这是针对各种浏览器的预设 - 请参阅此处获取更多信息），或者您可以使用比jQuery动画更好的动画库（像Green Sock TweenLite - http://greensock.com/tweenlite）来处理你的动画，这使得在动画结束时运行代码变得微不足道。

如何设置动画效果：隐藏＆＃34;？

5 个答案: