我有几个单独的标题:
<h3 class="ads">First</h3>
<h3 class="ads">Second</h3>
<h3 class="ads">Third</h3>
我希望能够连续循环它们,将文本从黑色变为红色,然后在下一个标题变为红色后再变回黑色。
这是我到目前为止所做的:它只运行一次,但是我不能让它成功地重新循环:
$('.ads').each(function(i) {
var el=$(this);
setTimeout(function() {
el.prevAll('.ads').css('color','black');
el.css('color', 'red');
}, i * 3000);
});
我希望能够手动设置每次更改之间等待的时间,因此解释也会有很大帮助!
答案 0 :(得分:5)
这是一种略有不同的方法。
var $headings = $('.ads'),
$length = $headings.length,
i = 0;
setInterval(function() {
$headings.css('color','black');
$headings.eq(i).css('color', 'red');
i = (i + 1) % $length;
}, 3000);
答案 1 :(得分:4)
您可以使用递归来优雅地完成此任务。
// configure the delay
var delay = 1000;
// save a pointer to the first element
var first = $('.ads').first();
// this function does the following
// a. color the current element red
// b. make all siblings black
// c. call itself with the next applicable element
function change(_elem) {
_elem.css('color','red').siblings().css('color', 'black');
setTimeout(function() {
change((_elem.next().length > 0) ? _elem.next() : first);
}, delay);
}
// start if off
change(first);