2

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

我的 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 回答