Question

我有几个div，每个div都有不同的背景颜色。

我需要将每个div的背景颜色更改为灰色，然后显示原始背景颜色，然后移动到下一个div并执行相同操作。我需要重复这一点。

我把这个JSFIDDLE放在一起，这应该解释我正在尝试做什么。

我遇到的问题是我的代码同时将所有div背景颜色更改为灰色，并且它也不重复！

这是我的代码：

$(".box").each(function(index) {

$(this).delay(400*index).css('background-color','#ccc');

});

有人可以就此提出建议吗？

我还尝试了建议的“重复”代码，这仍然会同时改变所有背景：

$('.box')
  .delay(800)
  .queue(function (next) { 
    $(this).css('background-color','#ccc');
    next(); 
  });

也尝试了这个：

$('.box')
  .delay(800)
  .queue(function (next) { 
    $(this).delay(400*index).css('background-color','#ccc');
    next(); 
  });

和此：

$('.box')
  .delay(800).delay(400*index)
  .queue(function (next) { 
    $(this).css('background-color','#ccc');
    next(); 
  });

我需要一个接一个地改变背景颜色！

编辑：

好的这是基于注释中George代码的代码的修改版本：

$(".box").each(function(index) {

var color = $(this).css('background-color');
$(this).delay(400*index).queue(function (next) { 
     $(this).css('background-color','#ccc');

    next(); 

  });

 $(this).css('background-color',color);
});

https://jsfiddle.net/j52dhetq/5/

问题在于它没有切换回原来的背景颜色。

Answer 1

我做了一些改变。我不确定你需要的价值观。但它会帮助你进行过渡。希望这会有所帮助!!

$(".box").each(function(index) {
$(this).delay(400*index).queue(function (next) { 
$(this).css('transition-timing-function','ease-in-out');
     $(this).css('animation','progress ' +400*index+'ms');

    next(); 

  });

});

@keyframes progress {
   50% { background-color: #ccc;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
					<div align="center" style="width:100%; height:10px;">
				<div class="box" style="background-color:red; width:12%; height:10px;display:inline-block;"></div>
				<div class="box" style="background-color:orange; width:12%; height:10px;display:inline-block;"></div>
				<div class="box" style="background-color:yellow; width:12%; height:10px;display:inline-block;"></div>
				<div class="box" style="background-color:green; width:12%; height:10px;display:inline-block;"></div>
				<div class="box" style="background-color:blue; width:12%; height:10px;display:inline-block;"></div>
				<div class="box" style="background-color:purple; width:12%; height:10px;display:inline-block;"></div>
				<div class="box" style="background-color:navy; width:12%; height:10px;display:inline-block;"></div>
				<div class="box" style="background-color:white; width:12%; height:10px;display:inline-block;"></div>
					
					</div>

一个接一个地改变多个div背景颜色然后恢复正常（重复）？

1 个答案: