通过jQuery按类执行动画，基于div的data属性动态设置移动距离

1. 动态为每个元素设置专属移动距离 #

jQuery的animate方法允许属性值传入一个函数，这个函数会针对每个匹配的DOM元素单独执行，函数内部的this指向当前元素，刚好满足你的需求：

$(".tobedropped").animate(
  {
    top: function() {
      // this指向当前正在执行动画的div元素
      const dropDistance = $(this).data("drop");
      return `+=${dropDistance}px`;
    }
  },
  650
);

这里用$(this).data("drop")替代attr("data-drop")是更推荐的写法，因为.data()会自动解析data-*属性的类型（比如把字符串"150"转换成数字150），后续如果需要做数值运算会更方便。

2. 确保回调仅在所有动画完成后触发 #

如果直接把startNextAnimation()写在animate的回调参数里，每个.tobedropped元素动画结束时都会调用一次，会导致重复触发后续动画。可以用.promise()方法将所有动画包装成一个Promise，等全部完成后再执行回调：

$(".tobedropped")
  .animate(
    {
      top: function() {
        return `+=${$(this).data("drop")}px`;
      }
    },
    650
  )
  .promise()
  .done(function() {
    // 所有动画执行完毕后，才触发下一段动画
    startNextAnimation();
  });

.promise()会收集所有匹配元素的动画状态，当最后一个元素的动画结束时，.done()里的回调就会执行一次，完美实现你需要的"串联动画"的效果。

内容的提问来源于stack exchange，提问作者pbspry