CODEWITHSUNDEEP
jquerycssdelaysequencefadeout
Paulos3000
Paulos3000

Reputation: 3545

.delay() not behaving as expected

I'm sure there's a simple solution to this problem, but I can't find it.

I have created a function that makes lines of text fade out sequentially, one by one, calling the .fadeOut() method on .each() element within an array.

However, when I run exactly the same code, but with the .css() method (to turn the text red), it changes them all at once, and not sequentially as above.

Can anyone explain why this is?

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

Thanks in advance

EDIT Including code here:

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

Upvotes: 3

Views: 80

Answers (3)

GKS
GKS

Reputation: 338

hope this help 

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

Upvotes: 0

Jannik
Jannik

Reputation: 342

Jquery delay only works with elements in the effect queue. A quick fix is put the css function in a query function ie .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>

Hope this helps.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337626

delay() only affects the various queues jQuery maintains, which css() does not use. To achieve the effect for the css() method you could use setInterval(). Try this:

$("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

Upvotes: 3

Related Questions