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

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

$("#div1").animate({ 
  left: '+=100px',
  opacity: 0.5
}, {
  duration: 1000,
  step: function(now, fx) {
    // 在每一帧的回调函数中对div进行处理
    // now参数表示当前属性值
    // fx参数表示动画效果的相关信息
    // 可以根据需要在这里对多个div进行不同的处理
  }
});

$("#div2").animate({ 
  top: '+=50px',
  width: '200px'
}, {
  duration: 1000,
  step: function(now, fx) {
    // 在每一帧的回调函数中对div进行处理
    // 可以根据需要在这里对多个div进行不同的处理
  }
});

$("#div3").animate({ 
  height: 'toggle',
  backgroundColor: 'red'
}, {
  duration: 1000,
  step: function(now, fx) {
    // 在每一帧的回调函数中对div进行处理
    // 可以根据需要在这里对多个div进行不同的处理
  }
});