Question

我试图在一个循环中做一个div更改颜色，每次颜色变化之间有一点延迟，所以你可以看到颜色，我不知道怎么做或搜索什么，所以现在我问，我有我只是想到了我应该如何工作，它很好地了解了我尝试做的事情。

$("#button").click(function(){
     $("#box").css("background-color", "red");
     delay(500);
     $("#box").css("background-color", "yellow");
     delay(500);
     $("#box").css("background-color", "green");
     delay(500);
     $("#box").css("background-color", "purple");
     loop();
});

and the fiddle

Answer 1

您正在寻找window.setInterval()

var colors = ['green','yellow','blue'];

var step = 0;

window.setInterval(function(){
    $(".box").css('background-color',colors[step]);
    if(step==colors.length-1) 
        step=0;
    else
        step+=1;
},500);

请参阅http://jsfiddle.net/NHVcU/

Answer 2

$('#button').click(function() {
    var colors = ['red', 'yellow', 'green', 'purple', 'gray'],
    cnt = 0;

    var loop = setInterval(function() {
        if (cnt === colors.lenght) {
            clearInterval(loop);
        }

        $('#box').css('background-color', colors[cnt]);
        cnt++;
    }, 500)
});

Answer 3

使用：

 $("#button").click(function(){
  setTimeout(function() {
  $("#box").css("background-color", "red");
     setTimeout(function() {
         $("#box").css("background-color", "yellow");
            setTimeout(function() {
             $("#box").css("background-color", "green");
                setTimeout(function() {
                 $("#box").css("background-color", "purple");
                    $("#button").click();
  },500);},500);},500);},500);});

<强> Working Demo

在延迟和循环中改变风格

3 个答案: