使用 step 在 Jquery 中的许多不同 div 上制作动画

Question

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

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 个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>