jquery循环 - 添加然后删除css类 - 无限循环

Question

我如何使用jQuery无限添加然后删除一组4 li的CSS类。

基本上，看到这个简单的小提琴（没有任何jquery）： http ： //jsfiddle.net/kHsvN/

我想循环通过框来改变一个盒子的CSS，翻回原来的CSS，然后继续下一个等等...

任何帮助赞赏！

Answer 1

$(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;
}

此示例使用随机颜色，但可以很容易地更改为.each部分中的.each .addClass() 。

JS Fiddle（实例）

http://jsfiddle.net/kHsvN/6/

JavaScript中的随机颜色生成器

Answer 2

你可以试试这个

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

DEMO

更新：用于连续循环

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

演示。

Answer 3

尝试这个：

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

它会在框中循环，一个接一个地向它们添加一个活动类。

http://jsfiddle.net/gKEmL/

Answer 4

我认为这是你想要的：

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>标记放在</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>内，而不是你当前拥有它的主体。

jquery循环 - 添加然后删除css类 - 无限循环

问题描述

4 个解决方案

解决方案1
2 2012-10-03 09:03:59

解决方案2
1 2012-10-03 08:57:54

解决方案3
1 2012-10-03 09:01:38

解决方案4
0 2012-10-03 09:12:54

jquery循环 - 添加然后删除css类 - 无限循环

问题描述

4 个解决方案

解决方案1 2 2012-10-03 09:03:59

解决方案2 1 2012-10-03 08:57:54

解决方案3 1 2012-10-03 09:01:38

解决方案4 0 2012-10-03 09:12:54

解决方案1
2 2012-10-03 09:03:59

解决方案2
1 2012-10-03 08:57:54

解决方案3
1 2012-10-03 09:01:38

解决方案4
0 2012-10-03 09:12:54