Question

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

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

然而，当我运行完全相同的代码，但使用.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")});：

＆＃13;

$("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")});
  
  });
});

＆＃13;

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

＆＃13;

希望这有帮助。

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（）表现不如预期

3 个答案: