Execution of chain goes forward despite delay

JavaScript
1

$(A_VALID_ELEMENT).fadeOut(500).delay(1000).html(item).fadeIn(500);

Pretty simple situation. I have a function which calls it, it assigns text to variable “item”. Then valid selector grabs the object, fades it out for 500ms, until 0, waits 1 second, then puts the content of item in the object, and fades it in for 500ms, until entirely visible. Except it’s not how it works.

What actually happens is, I trigger it, the content changes, fade away starts, 1 second wait, fade in starts.

There must be a way to not dodge it.

1 Like
2

You can give the fadeOut a callback function, that will trigger when the fadeOut has completed.
Put the rest of the behaviour in the callback function, and you should be good.

For details, see http://api.jquery.com/fadeout/

For example:

$(A_VALID_ELEMENT).fadeOut(500, function () {
    $(this).delay(1000).html(item).fadeIn(500);
});

Or perhaps even more expressively:

function fancyReplaceWith(item) {
    return function () {
    	$(this).delay(1000).html(item).fadeIn(500);
    };
}
$(A_VALID_ELEMENT).fadeOut(500, fancyReplaceWith(item));
2 Likes
3

Yes. That’s the solution. But why is it happening? Shouldn’t it fadeOut for 500 miliseconds, then wait 1 second (leaving it 500ms after fadeOut), change text and fadeIn back in?

The question is more why doesn’t it deliver expected result? Isn’t delay(t) suppose to delay the chain?

Still greatful for answer.

@edit - Yep, I checked it, it works perfectly. Still, why didn’t it work, is a wonder. Anyone want to explain :slight_smile: ?

4

It’s because the delay doesn’t wait from the end of the fadeOut animation.

With the following code:

$(A_VALID_ELEMENT).fadeOut(500).delay(1000).html(item).fadeIn(500);

Everything is happening from the one starting point, before the fadeOut occurs.

Time | 
   0 | fadeOut for 500ms | delay for 1000ms | (html and fadeIn) delayed
 250 | fadeOut for 250ms | delay for  750ms | (html and fadeIn) delayed
 500 | fadeOut ends      | delay for  500ms | (html and fadeIn) delayed
 750 |                   | delay for  250ms | (html and fadeIn) delayed
1000 |                   | delay ends       | update html & fadeIn for 500ms
1250 |                   |                  | fadeIn for 250ms
1500 |                   |                  | fadeIn ends

Compare that with the updated code:

function fancyReplaceWith(item) {
    return function () {
    	$(this).delay(1000).html(item).fadeIn(500);
    };
}
$(A_VALID_ELEMENT).fadeOut(500, fancyReplaceWith(item));

Where the sequence of events is:

   0 | fadeOut for 500ms | (delay, html and fadeIn) in callback
 250 | fadeOut for 250ms | (delay, html and fadeIn) in callback
 500 | callback executes | delay for 1000ms | (html and fadeIn) delayed
 750 |                   | delay for  750ms | (html and fadeIn) delayed
1000 |                   | delay for  500ms | (html and fadeIn) delayed
1250 |                   | delay for  250ms | (html and fadeIn) delayed
1500 |                   | delay ends       | update html, fadeIn for 500ms
1750 |                   |                  | fadeIn for 250ms
2000 |                   |                  | fadeIn ends
1 Like
5

Shouldn’t that exactly mean, that (html and fadeIn) delayed is when 500 | fadeOut ends? Meaning that it should be delayed for 500ms more, after fadeOut, right?

6

[quote=“Webkitnote, post:5, topic:218724, full:true”]Shouldn’t that exactly mean, that (html and fadeIn) delayed is when 500 | fadeOut ends? Meaning that it should be delayed for 500ms more, after fadeOut, right?
[/quote]

No, and that’s the key point to notice here. The delay starts right away, not from the end of the animation.

If you want something to occur from the end of the animation, that’s where the callback is used.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.