最后一个元素完成 jQuery 上滑效果后如何运行代码？ [复制]

Posted 2023-05-08

【中文标题】最后一个元素完成 jQuery 上滑效果后如何运行代码？ [复制]

【英文标题】：how do I run code after the last element has completed its jQuery slideup effect? [duplicate]

【发布时间】：2020-08-01 11:30:28

【问题描述】：

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

这里有一些示例代码可能有助于说明我遇到的问题：

$("#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>

【问题讨论】：

这两个都提供了合适的解决方案，谢谢你们！

【参考方案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>

【讨论】：

谢谢！我还发现使用 $.when(...).then(...);根据您和 XCS 在我原来的问题上作为 cmets 提供的链接工作。在 5 分钟内，当我被允许这样做时，我会勾选这个答案。 :)

【参考方案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>

【讨论】：

视情况而定...看起来会有所不同。

@CherryDT 的回答更适合您的问题。至少，这是我的偏好。我取消删除了这个答案，因为你是对的，其他人可能会从中发现价值。

不幸的是，这不适合我正在从事的实际项目。此类中的某些元素需要在其他元素不可见时可见。然而，CherryDT 的回答奏效了。对于其他能够以这种方式构建代码而不会丢失功能的人来说，这绝对是一个更直观的解决方案。

现在删除了我的副本。