jquery - 使用 jQuery 突出显示/取消突出显示菜单项

Question

在页面加载时，我想突出显示一个菜单项，并在一秒钟后再次取消突出显示它。我想实现一种骑士效果，但仅限于一个方向。从左到右，遍历完所有菜单项后应该停止。这样我想把更多的注意力放在我的菜单栏上。

我的 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');
    });
});

我已经尝试了以下建议，但没有成功。

Answer 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。

编辑

Here you go.

编辑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());