5

jQuery を使用して、4 つの li のセットで CSS クラスを無限に追加してから削除するにはどうすればよいですか。

基本的に、この単純なフィドルを参照してください (jquery なし): http://jsfiddle.net/kHsvN/

ボックスを循環してボックスの css を変更したり、元の css に戻したり、次の css に移動したりしたいなど...

どんな助けでも大歓迎です！

4

4 に答える 4

2 
$(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 (実際の例)

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

JavaScript のランダム カラー ジェネレーター

于 2012-10-03T09:03:59.870 に答える
1

あなたはこれを試すことができます

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

デモ。

于 2012-10-03T08:57:54.063 に答える
1

これを試して：

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/

于 2012-10-03T09:01:38.500 に答える
0

これはあなたが望むことをしていると思います:

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>は、現在の本文ではなく、ページの内部に配置する必要があります。

于 2012-10-03T09:12:54.953 に答える