Question

我有一个像这样的rgb颜色的列表：

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

我想使用列表中的颜色每2秒更新一次div背景颜色。为了实现它，我编写了以下代码：

(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);

我的目标是在列表中显示每种颜色2秒钟，然后再转到下一种颜色，但此代码等待2秒并执行循环，这样我才能看到最后一种颜色为蓝色（rgb（0,0,255）））。

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

谢谢大家。

Answer 1

这一切都归结为在某处保存迭代状态。例如：

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

和

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

您在setInterval之前执行change，而应添加匿名函数并在其中调用change函数。

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

Answer 3

我找到了一种使用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>

这是DEMO

如何在jQuery中每隔X秒更改div背景颜色而不起作用？

3 个答案: