javascript - 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