在最后一个元素完成其 jQuery 滑动效果后，如何运行编码？

Question

如果我有一个运行的 .slideUp() 反对属于多个元素的 class，我如何运行在 最后一个代码之后 元素已经完成了它的滑动效果？似乎使用内置的完整回调运行是在每个单独的元素完成其滑动之后的回调，而不是在它们全部完成时执行一次。

下面是一些示例代码，可能有助于说明我遇到的问题：

$("#my-button").click(() => {
  $(".my-target-class").slideUp(400, () => {
    console.log("I only want this to fire once...");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div class="my-target-class">div 1</div>
    <div class="my-target-class">div 2</div>
    <div class="my-target-class">div 3</div>
    <button id="my-button">try me</button>
</section>

Answer 1

在 jQuery 中，这实际上会在所有元素上运行您的 slideUp （包括它的回调），因此回调也会触发几次。

您可以使用 .promise 来获得对整个操作的承诺，并对其作出反应 done:

$("#my-button").click(() => {
  $(".my-target-class").slideUp(400).promise().done(() => {
    console.log("I only want this to fire once...");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div class="my-target-class">div 1</div>
    <div class="my-target-class">div 2</div>
    <div class="my-target-class">div 3</div>
    <button id="my-button">try me</button>
</section>

Answer 2

看来你应该将 div 容器化并且只向上滑动那个：

$("#my-button").click(() => {
  $(".target-container").slideUp(400, () => {
    console.log("I only want this to fire once...");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="target-container">
    <div class="my-target-class">div 1</div>
    <div class="my-target-class">div 2</div>
    <div class="my-target-class">div 3</div>
  </div>
  <button id="my-button">try me</button>
</section>

在最后一个元素完成其 jQuery 滑动效果后，如何运行编码？

how do I run code after the last element has completed its jQuery slideup effect?

javascript

jquery

slide

在最后一个元素完成其 jQuery 滑动效果后，如何 运行 编码？

how do I run code after the last element has completed its jQuery slideup effect?

javascript

jquery

slide

在最后一个元素完成其 jQuery 滑动效果后，如何运行编码？