javascript - 依次更改链接颜色，然后再将其改回

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>