Как сделать порядок выполнения и transitionend jQuery?

Question

[Степан Пельмегов]

Добрый день, есть следующий код, в нем происходит добавление класса к дивам ".col-xs-3", как сделать чтобы после того, как сработал each я мог вывести сообщение об успехе, а не после каждой итерации? Заранее спасибо.

$("#btn").click(function () {
    $(this).text('in progress');

    console.log("--Start process--");

    var hold = 500;
    var elems = $(".col-xs-3");
    var count = elems.length;

    elems.each(function (i, t) {
        var $this = $(t);
        setTimeout(function () {
            console.log("Start animation " + $this.text());
            if ($this.hasClass("flip_effect_vertical")) {
                $this.removeClass("flip_effect_vertical");
            } else {
                $this.addClass("flip_effect_vertical");
            }
            $this.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
                console.log("End animation " + $this.text());
            });
        }, i * hold);
        success();
    });

    function success() {
        alert("Success");
        console.log("--End process--");
        $("#btn").text('start');
    }

});

Answer 1

[Олег]

$("#btn").click(function () {
    $(this).text('in progress');

    console.log("--Start process--");

    var hold = 500;
    var elems = $(".col-xs-3");
    var count = elems.length;

    elems.each(function (i, t) {
        var $this = $(t);
        setTimeout(function () {
            console.log("Start animation " + $this.text());
            if ($this.hasClass("flip_effect_vertical")) {
                $this.removeClass("flip_effect_vertical");
            } else {
                $this.addClass("flip_effect_vertical");
            }
            $this.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
                console.log("End animation " + $this.text());
            });
        }, i * hold);
        if (i === --count) success();
    });

    function success() {
        alert("Success");
        console.log("--End process--");
        $("#btn").text('start');
    }

});

Comments

[Степан Пельмегов]

Пробовал и так, и просто !--count, либо не работает, либо выводится раньше времени.

[Олег]

Степан Пельмегов: Раньше времени это как?

[Степан Пельмегов]

Олег: у меня анимация там идет, и алерт должен выскочить после всей анимации, а появляется немного раньше.

[Олег]

Степан Пельмегов: Если вам нужно выполнить success() когда кончится анимация, то просто переместите это условие.

[Олег]

console.log("End animation " + $this.text());
if (i === --count) success();