如何检查我的函数中的所有动画是否都已结束？

Question

我有这个伪代码。 我需要检查所有动画是否已经结束。

我的函数里面有很多动画：

    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();
                }
            });
        });


    };

我们开始了！

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

我需要知道所有动画何时结束以及在调用我的回调之后。 这种方法有效，但有可能以某种方式更好地编写它吗？