Как задать последовательность выполнения функций в jquery?

Question

[Сергей Игнатьев]

Здравствуйте.

Как сделать, чтобы функции выполнялись последовательно? То есть так, чтобы последующая начиналась после того, как полностью выполнится предыдущая. Сейчас, они стартуют одновременно.

В целом, хочется понять, как задать последовательность выполнения функций для разных элементов (не обязательно fadeIn/fadeOut).

Буду сильно признателен за помощь!

$(document).ready(function () {
    $(".btn").on("click", function () {
        $(this).find(".img-animation").css({
                "width": "100%",
                "height": "100%",
            });
        $(this).find(".text-description").fadeIn();
        $(this).find(".img-description").fadeOut();
    });
    });

Answer 1

[Максим Павлов]

Вы про fadeIn/fadeOut?
В них можно передать callback, который выполнится, когда анимация завершится.
См. доку. api.jquery.com/fadein

fadeIn должна выполняться после анимации изменения width и height?
У вас на изменение этих свойств прописан transition? Тогда Вам нужно ловить событие transitionend.

Comments

[Сергей Игнатьев]

Подскажите пожалуйста, этот метод будет работать со всеми, не только к fadeIn/fadeOut ?

[Максим Павлов]

Сallback можно передать в fadeIn/fadeOut. Если вы анимируете изменение css-свойств, то Вам нужно ловить событие transitionend (если Вы используете transition'ы для плавного изменения этих свойств).

То есть, логика будет такая:
1) Подписываемся на событие transitionend для $(this).find(".img-animation"). В обработчике вызываем fadeIn. В fadeIn передает callback, внутри которого вызываем fadeOut.
2) Изменяем свойства через .css.

Вообще, будет здорово, если Вы выложите код на codepen или jsfiddle, чтобы можно было понять, что у Вас там происходит.

P.S. Недавно писал заметку про то, как последовательно выполнять css анимации.
maximpavlov.su/notes/css-animation-management

Answer 2

[twobomb]

$(document).ready(function () {
    $(".btn").on("click", function () {
        $(this).find(".img-animation").css({
                "width": "100%",
                "height": "100%",
            });
            var _this = this;
        $(this).find(".text-description").fadeIn("slow",function(){
        $(_this).find(".img-description").fadeOut("slow");
        });
        
    });
    });

Answer 3

[Sanovskiy]

Все уже есть в jQuery
.queue()