Highlight / Unhighlight menu item with jQuery

问题描述:

On page load I want to highlight a menu item and unhighlight it again after a second. I want to accomplish sort of a Knight Rider effect but only in one direction. From left to right and it should stop when it has traversed all the menu items. This way I want to put more attention on my menu bar.

My 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>

My CSS:

.highlight { color: #FFFFFF; }

$(document).ready(function () {

$(".menu-item a").each(function () {

$(this).addClass('highlight').delay(1000).removeClass('highlight');

});

});

I have tried the below suggestions but it didn't work.

网友答案:

You might want to try a recursive / callback pattern to add the next element's class as soon as the previous one gets removed.