Question

I’m trying to understand exactly what it means when I put multiple calls in a row on jQuery, because I’m not getting the results I expect in similar situations.

Example 1:

$(this).animate({opacity: 0.25}, 250).animate({opacity: 1.0}, 250);

As expected, this gives a quick flash of translucency before returning to full opacity.

Example 2:

$(this).animate({opacity: 0.25}, 250).removeAttr("style");

In this case, instead of a gradual return to opacity, I would expect the removeAttr(“style”) to cause it to jump back to opacity after the animation is complete. This is because the animate opacity function merely changes values for opacity and sets display:block, and I would expect that by removing these styles, everything returns to normal.

Instead, it seems like the removeAttr is firing before the animation is complete, clears out the style, and then animation sets the opacity some more, leaving the item translucent.

The fact that this is the sequence of events would seem to be confirmed by the fact that altering the removeAttr to use a completion callback works properly:

$(this).animate({opacity: 0.25}, 250, function(){$(this).removeAttr("style");});

Why is it that animations appear to be processed serially, while at least some functions are processed in parallel with the animations?

Answer 1

There are two different queues at work here.

When you call animate, it is pushed onto the effects queue, called fx. Most other things don’t use a queue. This is why the two calls seem to happen both at once.