2

ページの読み込み時に、メニュー項目を強調表示し、1 秒後に再び強調表示を解除したいと考えています。ある種のナイトライダー効果を達成したいのですが、一方向だけです。左から右に、すべてのメニュー項目を通過すると停止します。このようにして、メニューバーにもっと注意を向けたいと思います.

私のHTML：

<div id="header">
    <ul class="menu">
        <li class="menu-item"><a class="menu-item-link">Stage1</a></li>
        <li class="menu-item"><a class="menu-item-link">Stage2</a></li> 
    </ul>
</div>

私のCSS：

.highlight { color: #FFFFFF; }

$(document).ready(function () {
$(".menu-item a").each(function () {
        $(this).addClass('highlight').delay(1000).removeClass('highlight');
    });
});

以下の提案を試しましたが、うまくいきませんでした。

4

2 に答える 2

1

前の要素のクラスが削除されたらすぐに次の要素のクラスを追加するために、再帰/コールバック パターンを試してみることをお勧めします。

var runner = function (el) {

    var next = el.addClass('highlight').next('.menu-item a');

    setTimeout(function () {
        el.removeClass('highlight');
        next && runner(next);
    }, 1000)        
};

runner($('.menu-item a:first'));

ただし、テストされていないコード。しばらくして、jsFiddle を作成できるかどうかを確認します。

編集

どうぞ。

編集2

...そしてそれが、関連する HTML コードも投稿する理由です。

したがって、HTML を次のように考えます。

<div id="header">
    <ul class="menu">
        <li class="menu-item"><a class="menu-item-link">Stage1</a></li>
        <li class="menu-item"><a class="menu-item-link">Stage2</a></li> 
    </ul>
</div>

代わりにこれを使用してください：

var items = $('.menu-item a'),
    runner = function (el) {

        var next = items.eq(items.index(el) + 1).addClass('highlight');

        setTimeout(function () {
            el.removeClass('highlight');
            !!next.length && runner(next);
        }, 1000);
    };

runner(items.first());
于 2012-10-22T19:59:40.670 に答える
0 
$(document).ready(function () {
  $(".menu-item a").each(function () {
    $(this).addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
   next();
  });
});
于 2012-10-22T20:02:48.213 に答える