如何使用 jQuery 在一组 4 li 上无限添加然后删除 CSS 类。
基本上,看到这个简单的小提琴(没有任何 jquery):http: //jsfiddle.net/kHsvN/
我想循环通过盒子来改变盒子的css,翻转回原来的css,然后继续下一个等等......
任何帮助表示赞赏!
如何使用 jQuery 在一组 4 li 上无限添加然后删除 CSS 类。
基本上,看到这个简单的小提琴(没有任何 jquery):http: //jsfiddle.net/kHsvN/
我想循环通过盒子来改变盒子的css,翻转回原来的css,然后继续下一个等等......
任何帮助表示赞赏!
$(document).ready(function() {
window.setInterval(function() {
$("#topboxesmenu li a").each(function() {
$(this).css("background", get_random_color());
});
}, 1000);
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
此示例使用随机颜色,但可以.addClass()
在.each
零件中轻松更改为。
JS Fiddle(现场示例)
你可以试试这个
CSS对于当前项目,要添加/删除的类
ul#topboxesmenu li a.current{ background:black }
JS
$('#topboxesmenu li a').each(function(i){
var t=$(this);
setTimeout(function(){
t.addClass('current');
setTimeout(function(){
t.removeClass('current');
}, 1000);
}, 1100*i);
});
更新:对于连续循环
$(function(){
loopIt();
});
function loopIt(){
$('#topboxesmenu li a').each(function(i){
var t=$(this);
setTimeout(function(){
t.addClass('current');
setTimeout(function(){
t.removeClass('current');
if(i==$('#topboxesmenu li a').length-1) loopIt();;
}, 1000);
}, 1100*i);
});
}
演示。
尝试这个:
jQuery(document).ready(function() {
window.setInterval(function() {
var oldBox = jQuery('#topboxesmenu li.active');
if(oldBox.length == 0 || oldBox.next().length == 0)
{
oldBox.removeClass('active');
jQuery('#topboxesmenu li:first-child').addClass('active');
}
else
oldBox.removeClass('active').next().addClass('active');
},2000);
});
它将循环遍历这些框,一个接一个地向它们添加一个活动类。
我认为这是在做你想做的事:
el = $('#topboxesmenu li:first-child');
setInterval(function() {
el = window.el;
el.siblings().children('a').css('background','#ff0000');
el.children('a').css('background-color', 'blue');
el = el.next().length ? el.next() : el.parent().children('li:first-child');
}, 1000);
查看工作演示
更新:
关于您的测试页不起作用,您的 javascript 在 body 标记之外,请尝试将您的标记放在</body>
标记之前</html>
。你目前有这个:
</body>
<script type="text/javascript" ....
...
...
</html>
更新 2:
还有你的 jquery 脚本标签:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
应该放在<head>
页面的内部,而不是您当前拥有的正文。