如何在调用.done之前等待.animate函数完成？

Question

我在$ .when（）.done（）的一部分中发生了一系列延迟的动作

        $.when(
          $activeHighlight.removeClass('active'),
          $nextHighlight.addClass('active'),
          $nextHighlight.fadeIn(250),
          scrollToActiveHighlightConfirmationSlide(0),
        ).done(
          lazyloadHighlightConfirmationHighlights.load($nextHighlightImage[0])
        );

这很好！但是，每当我尝试使用调用动画的函数在一系列事件中开头时，似乎都不会“等待”动画完成，然后再继续。

这是我尝试构造它的方式：

        function slideLeft() {
          $activeHighlightImage.animate(
            {
              left: -$activeHighlightImage.width(),
              opacity: "0",
            }, 200);
        }

        $.when(
          slideLeft()
        ).done(
          $activeHighlight.hide(),
          $.when(
            $activeHighlight.removeClass('active'),
            $nextHighlight.addClass('active'),
            $nextHighlight.fadeIn(250),
            scrollToActiveHighlightConfirmationSlide(0),
          ).done(
            lazyloadHighlightConfirmationHighlights.load($nextHighlightImage[0])
          ),
        )

我可以单独运行动画，并且效果很好，因此在将其添加为延迟事件时，我一定会丢失一些东西。

有什么想法吗？

Answer 1

要在动画之后执行功能，请将其放置在动画的末尾，如下所示：

function slideLeft() {
$activeHighlightImage.animate(
  {
  left: -$activeHighlightImage.width(),
  opacity: "0",
  }, 200, function(){
    //Code here
  });
}