Как спрятать overlay на jquery

Question

Пишу модалку на jquery. Нужно чтоб после закрытия модалки с анимацией, пропадал overlay без анимации. Но выходит так что overlay просто пропадает и модалка тоже но без анимации

//modal window animation JQuery.

const overlay = jQuery('.overlay');
const modalWindow = jQuery('.modal-window');

jQuery(document).ready(function () {
    overlay.hide();
    modalWindow.hide();
})

const openButton = jQuery('.open-button');
const closeButton = jQuery('.close-button');

function closeModal() {
    modalWindow.slideUp(400);
    overlay.hide();
    //тут просто пропадает оверлей, надо чтоб сначала пропала модалка, после этого overlay
    
    openButton[0].addEventListener('click', openModal);
    closeButton[0].removeEventListener('click', closeModal);
}

function openModal() {
    overlay.show();
    modalWindow.slideDown(400);

    openButton[0].removeEventListener('click', openModal);
    closeButton[0].addEventListener('click', closeModal);
}

openButton[0].addEventListener('click', openModal);

Answer 1

Наверное, надо сначала дождаться окончания анимации modalWindow, а только потом вызывать overlay.hide()? А для этого неплохо было бы хотя бы одном глазом заглянуть в документацию и прочитать, что метод .slideUp() может принимать два параметра:

.slideUp( [duration ] [, complete ] )

второй из которых - функция, которая будет вызвана по завершении анимации. И установку/удаление слушателей событий я бы тоже выполнял с учётом окончания анимации, как-то так:

function closeModal() {
    // сначала убираем event listener с элемента closeButton[0]
    closeButton[0].removeEventListener('click', closeModal);
    // потом запускаем анимацию
    modalWindow.slideUp(400, function() {
        // анимация завершена, прячем оверлей
        overlay.hide();
        // и привязываем event listener к элементу openButton[0]
        openButton[0].addEventListener('click', openModal);
    });
}

function openModal() {
    // сначала убираем event listener с элемента openButton[0]
    openButton[0].removeEventListener('click', openModal);
    // потом показываем оверлей
    overlay.show();
    // потом запускаем анимацию
    modalWindow.slideDown(400, function() {
        // и когда она завершена,
        // привязываем event listener к элементу closeButton[0]
        closeButton[0].addEventListener('click', closeModal);
    });
}

БЛОГ НА HUSL

Как спрятать overlay на jquery

Ответы (1 шт):