Задержка, а затем автоматическое закрытие DIV

Question

(простите за мой английский, я голландец)

Я создаю наложение с несколькими эффектами и щелчками.Для настройки наложения и общих эффектов (слайд, затухание, длительность, ...) проблем нет.Что касается некоторых действий, через несколько секунд требуется автоматическое закрытие.

Вот мой код jQuery для полной анимации.

jQuery.noConflict();
jQuery(document).ready(function() {
    // START DOCUMENT READY

    // Start welkombox overlay
    jQuery(function() {
        jQuery("#welkombox div[rel]").overlay();
    });
    // End welkombox overlay

    // Start slide overlay content
    jQuery('#verhuiskeuze1-wachten').click(function() {
        jQuery('#verhuis-algemeen, #verhuis-wachten').animate(
            { left: "+=100%" }, // what we are animating
            {
                duration: 1000,
                easing: 'easeOutQuad',
            }
        );
    });
    // End slide overlay content

    // END DOCUMENT READY
});

Вот простая версия тела.

<!-- Visable content on page -->
<div id="content-inner">
    <div id="welkombox">
        <div id="box1" rel="#related1">Some content...</div>
        <div id="box2" rel="#related2">Some content...</div>
        <div id="box3" rel="#related3">Some content...</div>
    </div>
</div>

<!-- Overlay content, witch s visible onclick of one of the boxes above -->
<div id="related1" class="overlay">
    <div id="Inside-part1">Some text (button to slide, defind in the Jquery script)</div>
    <div id="Inside-part2">Some text</div>
</div>

<div id="related2" class="overlay">Some content...</div>
<div id="related3" class="overlay">Some content...</div>

Теперь для того, что я точно хочу сделать:

1. Создайте оверлей, если нажать на div в содержании тела.(СОВЕРШЕНО)
2. Откройте вкладку реферирования контейнера ведьмы.(СОВЕРШЕНО)
3. В моем проекте есть 2 элемента div (в виде интерактивных элементов) с действиями.Для одного из них содержимое с наложением перемещается на правую сторону и показывает другое содержимое.(СОВЕРШЕНО)
4. Если это последнее выполнено (щелкните и переместите вправо), наложение автоматически закрывается через несколько секунд.

Последнее, что кажетсябыть невозможным.Есть кто-нибудь, как мне помочь?

Спасибо

Answer 1

Вы звоните .animate(), но не указываете полную функцию, которая будет вызываться после завершения анимации. Это тот момент, когда вам нужно установить тайм-аут для закрытия оверлея .

Вот как это делается:

// all code that you already have...

.animate({ left: "+=100%" }, {
    duration: 1000,
    easing: 'easeOutQuad',
    complete: function() {
        window.setTimeout(function(){
            $("selector").hide(); // or .remove()
        }, 1000); // adjust time
    }
});

Дополнительные наблюдения

Этот код кажется ненужным:

// Start welkombox overlay
jQuery(function() {
    jQuery("#welkombox div[rel]").overlay();
});
// End welkombox overlay

Вместо этого вы должны просто позвонить:

// Start welkombox overlay
jQuery("#welkombox div[rel]").overlay();
// End welkombox overlay

Потому что вы уже в готовом обработчике событий. Не нужно добавлять другой обработчик. И эти два эквивалента (потому что я видел, как вы используете два из них):

jQuery(document).ready(function() { /* document read code */ });
// is the same as this shorter version
jQuery(function() { /* document read code */ });

Запятые

Остерегайтесь запятых в ваших объектах. Пример: * +1022 *

...
{
    duration: 1000,
    easing: "easeOutQuad", // <-- remove this comma
}
...

Это сделает объект недействительным в IE и не будет создан вообще. IE очень чувствителен к этому. Другие браузеры все еще работают, хотя ...