时间戳

首页 > 解决方案 > 使用 step 对 Jquery 中的许多不同 div 进行动画处理

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

问题描述

我有很多我想一次旋转的 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 循环中，我发生了变化，因此 div 发生了变化，所以它只旋转了 id 为 100 的 div。我该怎么办？

标签： javascripthtmljqueryanimationjquery-animate

解决方案

如果我了解您想要实现的目标是一次为 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>

推荐阅读