.delay() 未按预期运行

Question

我确定有解决此问题的简单方法，但我找不到。

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

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

谁能解释这是为什么？

提前致谢

编辑在此处包括代码：

<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

Answer 2

Jquery 延迟仅适用于效果队列中的元素。快速修复是将 css 函数放在查询函数中，即 .queue(function() { $(this).css("color", "red")});:

$("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).queue(function() { $(this).css("color", "red")});
  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<p class="top">line 4</p>
<p class="top">line 5</p>
<p class="top">line 6</p>
<p class="top">line 7</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>
<p class="bottom">line 4</p>
<p class="bottom">line 5</p>
<p class="bottom">line 6</p>
<p class="bottom">line 7</p>
<button class="ex2">
  "Go"
</button>

希望对您有所帮助。

Answer 3

希望对您有所帮助

$("button.ex1").on("click", function() {

  $(".top").each(function(index) {
    $(this).delay(400 * index).fadeOut();

  });
});

$("button.ex2").on("click", function() {

  $(".bottom").each(function(index) {

    $(".bottom:eq("+index+")").delay(400).css("color", "red");
  });
});

.delay() 未按预期运行

.delay() not behaving as expected

css

jquery

delay

sequence

fadeout