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

Question

我有很多 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。我该怎么办？

Answer 1

如果我理解你想要实现的是一次动画 100 divs，我可以说独立选择每个 div 是错误的方法，所以你可以标记所有 divs，你想通过一个共同的 class 立即制作动画，然后只从 JQuery 定位 class，然后制作动画，你应该有你想要的正确行为。

这里有一个例子：

$('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>

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

Animate over many different divs in Jquery using step

html

javascript

jquery

animation

jquery-animate