Jquery 按类制作动画，但通过每个 div 的单独数据属性动态设置距离

Question

我需要能够通过回调函数将一系列动画链接在一起，以便它们一个接一个地精确执行。但是，其中一些动画会同时影响多个 div（通过共享类），并且需要对不同的距离进行动画处理（通过每个 div 中定义的单独数据属性）。因此，如果可能的话，我真的想只调用一个动画事件，以使事情变得简单。

HTML 看起来像这样：

<div class="gamepiece gamepiece2 tobedropped" id="g65" data-drop="150"></div>
<div class="gamepiece gamepiece3" id="g66"></div>
<div class="gamepiece gamepiece5 tobedropped" id="g67" data-drop="50"></div>
<div class="gamepiece gamepiece1 tobedropped" id="g68" data-drop="100"></div>

我想调用一个 Jquery 动画，它将每个 div 向下移动“数据丢弃”像素数，即类似：

$(".tobedropped").animate({ "top": "+="+$(this).attr("data-drop")+"px"}, 650, function() {
     // callback function
     startNextAnimation();
});

显然 $(this) 在这种情况下不起作用，但是有没有一种方法可以根据每个 div 的单独数据丢弃属性值动态设置像素丢弃量？

谢谢！

Answer 1

我认为你必须循环遍历每个元素，根据它们的属性为它们设置动画。

$(".tobedropped").each(() => {
    $(this).animate({ "top": "+="+$(this).attr("data-drop")+"px"}, 650, startNextAnimation);
});