CSS3转换JQuery的fadeIn()不工作

Question

我想让一些内容在点击时翻转和淡出。看起来很简单，但是我有一些困难!

我使用JQuery的fadeIn()和fadeOut()方法，和CSS3转换来实现这一点，但目前它只在淡出时翻转。我肯定我在做一件非常愚蠢的事情，但是我想不出来。

这是我到目前为止所做的工作。任何帮助将非常感激!

http://jsfiddle.net/ptfy42rb/2/

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);
    }
});

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/