使用 step 对 Jquery 中的许多不同 div 进行动画处理答案

【问题标题】：Animate over many different divs in Jquery using step使用 step 对 Jquery 中的许多不同 div 进行动画处理
【发布时间】：2020-07-02 01:18:51
【问题描述】：

我有很多 div 想要一次旋转。我在网上查看并找到了一种使用 step 功能的方法。我想要的一个例子如下所示：

for (var i = 0; i < 99; i++) {
    var div = document.getElementById(i);
    $(div).animate({ left: 0}, {
    step: function(now) {
        $(div).css('-webkit-transform', 'rotate(' + now + 'deg)');
    }
})

但是，在 for 循环中，i 发生了变化，因此 div 发生了变化，所以它只旋转了 id 为 100 的 div。我该怎么办？

【问题讨论】：

标签： javascript html jquery animation jquery-animate

【解决方案1】：

如果我了解您想要实现的同时为 100 个 div 设置动画的目的，我可以说独立选择每个 div 是错误的方式，因此您可以通过一个通用类标记您想要一次动画的所有 div 并只需从 JQuery 定位该类，然后进行动画处理，您就应该拥有所需的正确行为。

这是一个例子：

$('div.anim').animate(
    { deg: 360 },
    {
      duration: 2000,
      step: function(now) {
        $(this).css({ transform: 'rotate(' + now + 'deg)' });
      }
    }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="0" class="anim" style="height:60px;width:60px;border:3px black solid;">text 0</div>
 <div id="1" class="anim" style="height:60px;width:60px;border:3px black solid;">text 1</div>
 <div id="2" class="anim" style="height:60px;width:60px;border:3px black solid;">text 2</div>
 <div id="3" class="anim" style="height:60px;width:60px;border:3px black solid;">text 3</div>

【讨论】：