.delay() не ведет себя так, как ожидалось

Question

Я уверен, что есть простое решение этой проблемы, но я не могу ее найти.

Я создал функцию, которая заставляет строки текста исчезать последовательно, один за другим, вызывая метод .fadeOut() на элементе .each() в массиве.

Однако, когда я запускаю точно такой же код, но с помощью метода .css() (чтобы повернуть текст красным), он меняет их все сразу, а не последовательно, как указано выше.

Может ли кто-нибудь объяснить, почему это так?

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

Заранее спасибо

EDIT Включая код здесь:

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