Home » Jquery » jquery – How check if all animations inside my function have ended?

jquery – How check if all animations inside my function have ended?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have this pseudo code. I need to check that all animations have ended.

My function with many animations inside:

    function animateText($element, $callback) {
        var $this = $element;
        var $wordList = $this.text().split("");
        $this.text("");
        $this.css('opacity', 1);

        $.each($wordList, function (idx, elem) {
            var newEL = $("<span/>").text(elem).css({
                opacity: 0
            });
            newEL.appendTo($this);
            newEL.delay(idx * 125);
            newEL.animate({
                opacity: 1
            }, 500, 'swing', function () {
               // now are animations are done
                if ($wordList.length === idx + 1) {
                    $callback();
                }
            });
        });


    };

We started!

animateText('#myText', function(){
  console.log('ALL ANIMATIONS ARE DONE!');
});

I need to know when all the animations have ended and after call my callback. This approach works, but is possible to write it somehow better?

How to&Answer: