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，耗时200ms
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
          );
        }

这是我更改原始$ .wone的方式

        $.when(
          $activeHighlight.removeClass('active'),
          $nextHighlight.addClass('active'),
          $nextHighlight.fadeIn(250),
          scrollToActiveHighlightConfirmationSlide(0),
        ).done(
          lazyloadHighlightConfirmationHighlights.load($nextHighlightImage[0]),
          $activeHighlightImage.addClass('out-left');
          $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承诺中并遇到与我相同的问题，也许从另一个角度来看待它会得到您想要的结果？