Почему jQuery.fadeTo не анимировать, если toggleClass вызывается в обратном вызове?

У меня есть модальное поле, которое начинается с класса «hidden», который делает модальным display: none;(чтобы невидимый модальный не захватывал щелчки мыши)

Чтобы исчезнуть в модальном я делаю

jQuery('#modalID').toggleClass('hidden'); <-- Makes the modal display: block; by removing the "hidden" class
jQuery('#modalID').fadeTo(.3, 1.0);

Который работает отлично. Проблема заключается в том, когда я пытаюсь снова включить «скрытый» класс после исчезновения (чтобы он отображался:нет: снова). Когда я пытаюсь переключить» скрытый » класс в fadeto callback, модальный просто исчезает мгновенно. Вот мой код

jQuery('#modalID').fadeTo(.3, 0, function(){
    jQuery('#modalID').toggleClass('hidden'); <-- *should* make the modal display:none AFTER fading it out....
});

Я пытался явно добавить класс в обратный вызов fadeTo

jQuery('#modalID').fadeTo(.3, 0, function(){
    jQuery('#modalID').addClass('hidden');
});

и даже пытался полностью игнорировать обратный вызов и просто помещать команды обратно…

jQuery('#overlayID').fadeTo(.3, 0); jQuery('#overlayID').toggleClass('hidden');

Как удалить модальное значение, а затем добавить класс «hidden» обратно в модальные послесловия?

1 ответ

  1. Проблема связана с вашим durationпараметром. Он дается в миллисекундах, поэтому ваша настройка .3означает 0.0003секунды. Следовательно увядание появляется мгновенно, и обратный вызов немедленно срабатывает.

    Чтобы исправить это, предположительно, вы хотите, чтобы анимация длилась 0,3 секунды, поэтому значение должно быть 300. Попробовать это:

    $('#modalID').fadeTo(300, 0, function(){
    $(this).toggleClass('hidden');
});

    Также обратите внимание, что можно просто использовать fadeOut()и избегать использования второго параметра непрозрачности.