Question

关于使用jQuery淡化一个元素后，我遇到了一个令人沮丧的问题。我设置了一个CSS动画，当页面使用以下内容加载时淡入元素（我也有相关的浏览器前缀，我正在使用Stylus）：

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.elem {
    opacity: 0;
    animation: fadein 500ms ease-in 1ms forwards;
}

我的问题是，当激活一个运行以下内容的事件处理程序时，fadeOut不会淡出，而是直接跳到空白处：

    $('.elem').fadeOut(400, function(){
        $('.elem').fadeIn(400);
    });

我已经能够在this JSFiddle中复制该问题。谁能帮我吗？ :)非常感谢！

Answer 1

我会说它与你正在使用的CSS相冲突。 jQuery可能正在使用与CSS不同的其他不透明度相关属性。 An all jQuery solution might be this:

CSS

.elem {
    display: none;
}

的jQuery

$('.elem').fadeIn(1000); // on page load, fade in with jQuery

$('#go').click(function(){
    $('.elem').fadeOut(400, function(){
        $('.elem').fadeIn(400);
    });
});

相关：Conflict between CSS transition and jQuery fade

Answer 2

我知道您要求FadeIn和FadeOut ...代替您使用animate和opacity代码。

$('#go').click(function(){
    $('.elem').css('animation','none').animate({
        'opacity' : 0
        },function(){
            $('.elem').animate({
                'opacity' : 1
                });
        });
    });

Answer 3

似乎css-animation的优先级高于jQuery在使用fadeOut时应用于元素的内联样式。这意味着动画的opacity : 1;会覆盖jQuery应用的任何不透明度设置，直到jQuery将元素设置为display:none;

你可以这样做以解决问题：

$('#go').click(function(){

   $('.elem').css('animation','none').fadeOut(400, function(){
      $('.elem').fadeIn(400);
    });

});

CSS淡入后，jQuery fadeOut（）跳过

3 个答案: