是否可以使用循环(for/while)来制作动画?

Is it possible to animate using loops (for/while)

本文关键字：动画 while 可以使 循环 for 是否      更新时间：2023-09-26

我可能完全找错了方向，但我正在寻找一种在加载时持久地为页面上的元素动画的方法。我尝试过使用for循环，但无法让它工作，而while循环当然只是无限的。下面是我的目标提琴，任何帮助将不胜感激!

https://jsfiddle.net/8dL3zvcp/

HTML: 

<div class="one"></div>

Jscript: 

$("document").ready(function(){

for (i = 0; i < 10; i++) {
    $(".one").css("background-color", "red").delay(2000).css("background-color" ,"blue").delay(2000);
}
});

我会使用一对类，并在每个所需间隔重复切换一次:

setInterval(function() {
  $(".one").toggleClass("toggle-a toggle-b");
}, 2000);
.toggle-a {
  background-color: blue;
}
.toggle-b {
  background-color: green;
}
<div class="one toggle-a">This is the div</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但是如果你真的想使用内联样式，跟踪你当前显示的是哪个样式，然后再次切换:

var current = "";
function setBackground() {
  current = current === "blue" ? "green" : "blue";
  $(".one").css("background-color", current);
}
setBackground();
setInterval(setBackground, 2000);
<div class="one toggle-a">This is the div</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

相关文章：