![](/img/trans.png)
[英]Changing background color with setInterval and auto page scroll with active records
[英]Changing background color with setInterval
嗨,我正在尝试使一排div闪烁, 但是一个div应该一次闪烁 。(并非所有div都应该同时闪烁[我可以这样做])。
有点像交通信号灯的工作方式。 每盏灯都是一排灯的一部分,并且每盏灯都通过一个循环打开和关闭。 在我的情况下,闪烁是为了提醒用户div或可点击。
我把每个盒子放在一个数组中,但是我不知道如何在循环中改变每个盒子的颜色。 我猜想解决此问题的方法是添加和删除包含颜色的类,并且应该在1或2秒钟后执行此操作,以便setInterval可以播放。 我不知道。
但是这是我的悲伤代码
var arr =[];
$(".boxes").each(function(){
arr.push($(this));
});
function bgChange(){
for(i = 0; i < arr.length; i++){
arr[i].addClass("red");
}
}
setInterval(bgChange, 2000);
});
我期待着看到你们想出的创造性方法来完成这项工作。
JSFIDDLE谢谢高级
尝试:
var arr = $(".boxes");
var current = 0;
function bgChange(){
if (arr.length > 0){
//Remove class of all items
arr.removeClass("red");
//Set Class of current item
arr.eq(current).addClass("red");
//Increase the current index
current = (current + 1) % arr.length;
}
}
setInterval(bgChange, 2000);
您可以尝试使用以下代码进行操作。 演示版
$(document).ready(function () {
var arr = [];
var i = 0;
$(".boxes").each(function () {
arr.push($(this));
});
function bgChange() {
for (var count = 0; count < arr.length; count++) {
if (i == count) arr[count].css('background-color', 'red');
else arr[count].css('background-color', 'white');
}
i++;
if (i === arr.length) i = 0;
}
setInterval(bgChange, 2000);
});
编辑:如果您想通过使用CSS类来做到这一点,修改for循环,如下所示:
for (var count = 0; count < arr.length; count++) {
if (i == count) arr[count].addClass('red');
else arr[count].removeClass('red');
}
尝试
var $boxes = $(".boxes");
function bgChange(){
var $active = $boxes.filter('.red'), $next = $active.next('.boxes');
if(!$next.length){
$next = $boxes.first();
}
$active.removeClass('red');
$next.addClass('red');
}
setInterval(bgChange, 2000);
演示: 小提琴
您可以使用toggleClass
来设置当前框的类:
var boxes = $(".boxes");
var current = 0;
function animate() {
boxes.each(function(index) {
$(this).toggleClass("red", index == current);
});
current = (current + 1) % boxes.length;
setTimeout(animate, 1000);
};
animate();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.