如何在jQuery中每X秒更改div背景颜色无效？

Question

I have a list with some rgb colours like this: 我有一个带有一些rgb颜色的列表，如下所示：

var ls = ['rgb(255,0,0)','rgb(0,255,0)', 'rgb(0,0,255)'];

And I would like to update a div background colour every 2 seconds using the colours from the list. 我想使用列表中的颜色每2秒更新div背景颜色。 To achieve it, I have written the following code: 为此，我编写了以下代码：

(function($){
  var $box    = $('#box');
  var temp;

  var ls = ['rgb(255,0,0)','rgb(0,255,0)', 'rgb(0,0,255)'];

  $.each(ls, function(i, x){
    temp = setInterval(change(x), 2000);
  });

  function change(color) {
    $box.css('background-color', color);
  }

})(jQuery);

My goal is to display every colour in the list for 2 seconds before moving on to the next colour but this code waits 2 seconds and executes the loop so I can only see the last colour which is blue (rgb(0,0,255)). 我的目标是将列表中的每种颜色显示2秒钟，然后再转到下一种颜色，但是此代码等待2秒钟并执行循环，因此我只能看到最后一种蓝色（rgb（0,0,255））。

My HTML looks like this: 我的HTML看起来像这样：

<html>
<head>
  <title>bin</title>
  <style>
    #box{
      width: 200px;
      height: 200px;
      background-color: rgb(0,0,0);
    }
  </style>
</head>

<body>

   <div id="box"></div>
   <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
   <script src="main.js"></script>
</body>
</html>

Thanks everyone. 感谢大家。

Answer 1

It all comes down to saving iteration state somewhere. 全部归结为将迭代状态保存在某个地方。 For example like this: 例如这样：

function Cycle(array) {
    var i = 0;
    this.next = function () {
       i %= array.length;
       return array[i++];
    }
}

and 和

var colors = new Cycle(['rgb(255,0,0)','rgb(0,255,0)', 'rgb(0,0,255)']);

$('#box').css('background-color', colors.next());

setInterval(function () {
    $('#box').css('background-color', colors.next())
}, 2000);

Answer 2

You're executing change before setInterval, instead you should add anonymous function and call your change function inside. 您要在setInterval之前执行change ，而应该添加匿名函数并在内部调用change函数。

  $.each(ls, function(i, x){
    temp = setInterval(function() { change(x); }, 2000);
  });

Answer 3

I have found a nicer way using keyframes to achieve this color transition using plain css although this technique is not supported by IE9 and lower but I thought it'd be worth adding it here in case someone is reading. 我已经找到了一种更好的使用keyframes方法来使用纯CSS来实现这种颜色过渡，尽管IE9和更低版本不支持此技术，但是我认为值得在这里添加它，以防有人阅读。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Here is a DEMO 这是一个演示

如何在jQuery中每X秒更改div背景颜色无效？

问题描述

3 个解决方案

解决方案1
3 2015-11-30 10:41:20

解决方案2
1 2015-11-30 10:25:14

解决方案3
1 已采纳 2015-12-27 14:40:46

如何在jQuery中每X秒更改div背景颜色无效？

问题描述

3 个解决方案

解决方案1 3 2015-11-30 10:41:20

解决方案2 1 2015-11-30 10:25:14

解决方案3 1 已采纳 2015-12-27 14:40:46

解决方案1
3 2015-11-30 10:41:20

解决方案2
1 2015-11-30 10:25:14

解决方案3
1 已采纳 2015-12-27 14:40:46