CSS3 转换 JQuery fadeIn() 不工作

Question

我正在尝试让一些内容在点击时翻转和淡入淡出 in/out。看似简单，但我遇到了一些困难！

我正在使用 JQuery 的 fadeIn() 和 fadeOut() 方法，以及 CSS3 转换来实现此目的，但目前它仅在淡出时翻转。我确定我正在做一些非常愚蠢的事情，但我想不通。

这是 fiddle 到目前为止我所做的。任何帮助将不胜感激！

Answer 1

我认为最好使用 show() 和 hide() 而不是 fadeIn() 和 fadeOut()，因为这样所有的转换都是由 CSS 完成的，这被推荐。而且您还需要使用 callback 函数和 setTimeout 才能正常工作。

相关代码：

$('.click').click(function() {
    if (lightbox.hasClass('hidden')) {
        lightbox.show(0, function(){ // Add class when show is completed
            lightbox.addClass('visible');
            lightbox.removeClass('hidden');
        });
    } else {
        lightbox.addClass('hidden');
        lightbox.removeClass('visible');
        setTimeout(function(){ // Hide lightbox when transition is completed
            lightbox.hide();
        }, 400);
    }
});

DEMO

Answer 2

这似乎是一个时间问题。将 dequeue 选项与 fadeIn 一起使用可以解决它。

if (lightbox.hasClass('hidden')) {
    lightbox.fadeIn({queue: false, duration: '400'});
    lightbox.addClass('visible')
    lightbox.removeClass('hidden');
} else {
    lightbox.addClass('hidden')
    lightbox.removeClass('visible');
    lightbox.fadeOut(400);
}

http://jsfiddle.net/jessikwa/ptfy42rb/5/

CSS3 转换 JQuery fadeIn() 不工作

CSS3 transform on JQuery fadeIn() not working

css

jquery

css-animations