Анимация и эффекты JQuery применяются к нескольким элементам с помощью $ .when () и then () - PullRequest
Новая
       23

Анимация и эффекты JQuery применяются к нескольким элементам с помощью $ .when () и then ()

0 голосов
/ 07 сентября 2018

У меня есть такой HTML-элемент, 

<div class="row h-100 p-3 justify-content-center align-items-center m-0">
        <h1 class="col-12 text-center position-absolute welcome-line-1 d-none-edited" id="welcome-line-1">TEXT 01</h1>
        <h3 class="col-12 text-center position-absolute welcome-line-2 d-none-edited" id="welcome-line-2">TEXT 02</h3>
        <h2 class="col-12 text-center position-absolute welcome-line-3 d-none-edited" id="welcome-line-3">TEXT 03</h2>
    </div>

и я хочу анимировать эти текстовые элементы с помощью jQuery. Это мой код jquery для одного элемента. 

var line_1_anim = function(){
            return $('#welcome-line-1')
                .css('opacity', 0)
                .slideDown('slow')
                .animate(
                    { opacity: 1 },
                    { queue: false, duration: 'slow' }
                )
                .delay(1000)
                .slideUp('slow');
        }

и давайте предположим, что у меня есть три элемента, и я использую этот вид подхода для анимации каждого элемента один за другим, используя $ .when () и then () 

$.when(line_1_anim())
   .then(line_2_anim)

Я пытаюсь уменьшить сложность кода и добиться этого. Уже мои функции работают, но я хочу сделать больше. Потому что, если я хочу добавить еще 10 элементов, я должен повторить один и тот же код 10 раз. Поэтому я пишу что-то вроде этого. 

var line_animation = function(selector,delay){
            return selector
                .css('opacity', 0)
                .slideDown('slow')
                .animate(
                    { opacity: 1 },
                    { queue: false, duration: 'slow' }
                )
                .delay(delay)
                .slideUp('slow');
        }

        $.when(line_animation(line_1,1000))
        .then(line_animation(line_2,2000))
        .then(line_animation(line_3,3000));

Я просто планировал изменить селектор и задержку и запустить один и тот же метод несколько раз. Но это не работает так, как я хочу. Все функции работают сразу, а не одна за другой.

Любая идея, что не так с моим подходом и как мне этого добиться.

Надеюсь, я объяснил свой вопрос, и все ясно.

1 Ответ

0 голосов
/ 07 сентября 2018

Из примера обещания jQuery вы можете переписать все как (например, line_animation должен возвращать обещание, а не объект jQuery): 

var line_animation = function (selector, delay) {
    var dfd = jQuery.Deferred();
    selector.css('opacity', 0)
            .slideDown('slow')
            .animate({opacity: 1}, {queue: false, duration: 'slow'})
            .delay(delay)
            .slideUp('slow', function () {
                dfd.resolve("hurray");
            });
    return dfd.promise();  // return a promise....
}

$.when(line_animation($('#welcome-line-1'), 1000)).then(function () {
    line_animation($('#welcome-line-2'), 2000).then(function () {
        line_animation($('#welcome-line-3'), 3000);
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="row h-100 p-3 justify-content-center align-items-center m-0">
    <h1 class="col-12 text-center position-absolute welcome-line-1 d-none-edited" id="welcome-line-1">TEXT 01</h1>

    <h3 class="col-12 text-center position-absolute welcome-line-2 d-none-edited" id="welcome-line-2">TEXT 02</h3>

    <h2 class="col-12 text-center position-absolute welcome-line-3 d-none-edited" id="welcome-line-3">TEXT 03</h2>
</div>
...