jQuery Deferred - 如何在 .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])
          ),
        )

我可以单独运行动画，而且效果很好，所以在将其添加为延迟事件时，我一定会遗漏一些东西。

理想情况下，它会是这样的......

1. slideLeft，耗时 200 毫秒
2. （等待200ms，同时上述动画完成）
3. $activeHighlight.hide()
4. 立即准备通过完成 .when() 函数来展示新的亮点
5. 然后，在 .done() 上，调用lazyloader 加载新的高亮图像。

发生类似数字 2 的事情是我目前遇到问题的地方......

有什么想法吗？

Answer 1

从我读过的其他精彩对话中，我的印象是 jQuery 承诺不能很好地处理我正在寻找的那种延迟或等待。老实说，当时他们提出的解决方案让我有点不知所措。

然后我意识到......

我所追求的不是承诺延迟，而是一种以某种方式显示“slideLeft()”动画的方法。

就在那时它击中了我！我没有尝试使用 jQuery 出色的 .animate() 函数，而是使用各种变换 3d 矩阵创建了单独的图像类。

这使我最初可以从右侧开始后续的高亮图像，然后作为原始 .done() 操作的一部分，将图像“居中”，从而创建我想要的效果。

这是我使用的scss

        -webkit-transition: all 400ms ease;
        -moz-transition: all 400ms ease;
        -o-transition: all 400ms ease;
        transition: all 400ms ease;

        &.out-right {
          transform: matrix3d(
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            800,0,0,1
          );
        }

        &.active {
          transform: matrix3d(
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            0,0,0,1
          );
        }

        &.out-left {
          transform: matrix3d(
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            -800,0,0,1
          );
        }

这是我如何更改原始 $.when .done

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

然后，在关联视图中，我只需要加强图像的初始类结构。它看起来像这样

 <div class="highlight">
    <%= image_tag tag.images.first.file_url(:speck),
      class: "active",
      ...
    %>
  </div>

  <% tag.images.drop(1).each do |image| %>
    <div class="highlight">
      <%= image_tag image.file_url(:speck),
        class: "out-right",
        ...
      %>
    </div>
  <% end %>

因此，如果其他人正在寻找一种将动画合并到 jQuery 承诺中的方法并且遇到了与我相同的问题，也许从不同的角度来看它会得到你想要的结果？

PS：我没有展示我在循环浏览图像类状态时如何“重置”它们，但如果您需要发布，请随时提出请求，我会分享我的想法。