jquery - .delay() 未按预期运行

Question

我确信这个问题有一个简单的解决方案，但我找不到。

我创建了一个函数，使文本行逐行淡出，调用 .each() 元素上的 .fadeOut() 方法数组。

但是，当我运行完全相同的代码，但使用 .css() 方法(将文本变为红色)时，它会立即更改所有代码，而不是像上面那样按顺序更改。

谁能解释这是为什么？

https://jsfiddle.net/v9hzpuf6/3/

提前致谢

编辑 在此处包括代码:

<h1>Example 1: .fadeOut()</h1>
<h2>Works as expected...</h2>
<p class="top">line 1</p>
<p class="top">line 2</p>
<p class="top">line 3</p>
<button class="ex1">"Go"</button>

<h1>Example 2: .css()</h1>
<h2>Doesn't work as expected...</h2>
<p class="bottom">line 1</p>
<p class="bottom">line 2</p>
<p class="bottom">line 3</p>
<button class="ex2">Go</button>

JS:

$("button.ex1").on("click", function() {
  $(".top").each(function(index) {
    $(this).delay(400 * index).fadeOut();
  });
});

$("button.ex2").on("click", function() {
  $(".bottom").each(function(index) {
    $(this).delay(400 * index).css("color", "red");
  });
});

Answer 1

delay() 只影响 jQuery 维护的各种队列，css() 不使用。要实现 css() 方法的效果，您可以使用 setInterval()。试试这个:

$("button.ex2").on("click", function() {
    var index = 0;
    var timer = setInterval(function() {
        var $next = $('.bottom').eq(index++);
        if (!$next.length)
            clearInterval(timer);
        else
            $next.css('color', 'red');
    }, 400);
});

Updated fiddle