Преобразование CSS3 в JQuery fadeIn() не работает

Я пытаюсь заставить некоторый контент переворачиваться и исчезать при нажатии. Кажется простым, но у меня возникли некоторые трудности!

Для этого я использую методы fadeIn() и fadeOut() JQuery и преобразование CSS3, но в настоящее время он переворачивается только тогда, когда исчезает. Я уверен, что делаю что-то действительно глупое, но я не могу понять это.

Вот скрипка с тем, что я сделал до сих пор. Любая помощь будет принята с благодарностью!

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


jquery css css-animations
person Kate    schedule 16.07.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, что лучше использовать 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);
    }
});

ДЕМО

person lmgonzalves    schedule 16.07.2015

arrow_upward
1
arrow_downward

Кажется, это проблема времени. Использование опции 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/

person jessikwa    schedule 16.07.2015
comment
Спасибо! Это решило проблему, но я собираюсь заменить fadeIn() и fadeOut() на show() и hide(), как рекомендует @lmgonzalves :) - person Kate; 16.07.2015