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

Answer 2

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

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

2 个答案:

修改

编辑2