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

Question

我可能完全找错了树，但我正在寻找一种在加载时持续为页面上的元素设置动画的方法。我已经使用 for 循环玩了一下，但无法让它工作，而 while 循环当然只是无限的。以下是我的目标的 fiddle ，任何帮助将不胜感激!

https://jsfiddle.net/8dL3zvcp/

HTML:

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

J脚本:

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



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

});

Answer 1

我会使用一对类并按照所需的时间间隔重复切换它们一次:

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>