是否可以使用循环动画​​（for / while）

Question

我可能会完全咆哮错误的树，但我正在寻找一种方法来在加载时持久地为页面上的元素设置动画。我使用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);
}

});

Answer 1

我会使用一对类，并按照所需的间隔重复切换一次：

＆＃13;

＆＃13;

setInterval(function() {
  $(".one").toggleClass("toggle-a toggle-b");
}, 2000);

＆＃13;

.toggle-a {
  background-color: blue;
}
.toggle-b {
  background-color: green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但如果您真的想使用内联样式进行操作，请跟踪您当前正在显示哪一个并再次切换：

＆＃13;

＆＃13;

var current = "";
function setBackground() {
  current = current === "blue" ? "green" : "blue";
  $(".one").css("background-color", current);
}
setBackground();
setInterval(setBackground, 2000);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;