jQuery fadeOut() 在 CSS 淡入后跳过

Question

在使用 CSS 淡入元素后，我在使用 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

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

你可以这样做来绕过：

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

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

});