按顺序更改链接颜色，然后将其更改回来

Question

所以我一直在玩我编写的以下代码来显示/隐藏我网站上的顶级菜单，这里没有什么令人印象深刻的。然而，我正在努力实现（并且悲惨地失败）是顺序地使每个链接变为这个亮蓝色然后变回白色。我正在尝试添加/删除当前的状态类以实现颜色更改。但它显然不起作用，发生的事情是类立即被添加到所有链接然后从未被删除..

理想情况下，链接1，然后是2，然后是3，等都会闪烁蓝色，然后在几毫秒之后，每个都会变回白色。

以下是我的jQuery代码..

jQuery( document ).ready(function($){
$( '#menuIcon' ).on('click', function(e){
    $( this ).toggleClass('active');
    $( '#primaryMenu' ).toggleClass('active');

    if( $( '#primaryMenu' ).hasClass('active') ){
        $('#primaryMenu > li').each(function(i) {
            $(this).delay((i++) * 200).addClass( 'current-menu-item' );
            $(this).delay((i++) * 300).removeClass( 'current-menu-item' );
        })
    }
});

<ul class="trans5 active" id="primaryMenu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 current-menu-item" id="menu-item-77"><a href="http://example.com">Link 1</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71 current-menu-item" id="menu-item-71"><a href="http://example.com">Link 2</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92 current-menu-item" id="menu-item-92"><a href="http://example.com">Link 3</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91 current-menu-item" id="menu-item-91"><a href="http://example.com">Link 4</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90 current-menu-item" id="menu-item-90"><a href="http://example.com">Link 5</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95 current-menu-item" id="menu-item-95"><a href="http://example.com">Link 6</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76 current-menu-item" id="menu-item-76"><a href="http://example.com">Link 7</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80 current-menu-item" id="menu-item-80"><a href="http://example.com">Link 8</a></li>
</ul>

<div id="menuIcon" title="Show Menu" class="trans5">
<div class="one trans2"></div>
<div class="two trans2"></div>
<div class="three trans2"></div>
</div>

Answer 1

你以错误的方式使用delay。 jQuery的delay用于排队效果，addClass不被视为效果。请使用queue对方法进行排队。像这样：

var inDelay = 100;
var outDelay = 200;

$( '#menuIcon' ).on('click', function(e){
  
    $('.menu-item').each( function(i){
      
      $(this).delay(inDelay * i).queue( function () {
        
        $(this).addClass('current-menu-item').dequeue().delay(outDelay).queue( function () {

          $(this).removeClass('current-menu-item').dequeue();
        
        });
      });
    });
});

body { text-align: left; }
ul { padding: 0; }
.menu-item { display: inline-block; background-color: black; padding: .1em .25em; }
.menu-item a { color: white; text-decoration: none; transition: color .5s; }
.menu-item.current-menu-item a { color: blue; }
#menuIcon { display: inline-block; color: white; background-color: green; cursor: pointer; padding: .1em .25em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="trans5 active" id="primaryMenu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77" id="menu-item-77"><a href="http://example.com">Link 1</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71" id="menu-item-71"><a href="http://example.com">Link 2</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92" id="menu-item-92"><a href="http://example.com">Link 3</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91" id="menu-item-91"><a href="http://example.com">Link 4</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90" id="menu-item-90"><a href="http://example.com">Link 5</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95" id="menu-item-95"><a href="http://example.com">Link 6</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76" id="menu-item-76"><a href="http://example.com">Link 7</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80" id="menu-item-80"><a href="http://example.com">Link 8</a></li>
</ul>
<div id="menuIcon" title="Show Menu" class="trans5">
  Show Menu
</div>