JQuery chain against callbacks for animation functions

Question

Let's say I have an element that I want to animate:

$('.hey').show(1000).slideUp(1000); 

What is the difference between this and:

 $('.hey').show(1000, function() { $(this).slideUp(1000); }); 

in terms of what is happening inside the country? As far as I know, animations are asynchronous in jQuery. Therefore, the first example, show and slideUp should fire at the same time. In the second case, slideUp should only fire after the show finishes.

However, for some reason, people, such as in this answer , say they are "the same." Why are they the same, despite the (obvious) fact that they work differently (in the first example, the return will occur immediately, unlike the second)?

Answer 1

However, for some reason, people like this answer say they are "the same."

You are right, this is not so. There is a particularly big difference between the two if more than one item matches .hey . But with your cited code, although the sequence of steps they take is different, they end up doing the same.

Why are they the same, despite the (obvious) fact that they work different (in the first example, the return will occur immediately, unlike the second)?

In both of these examples, the code starts and ends ("returns") immediately.

In the first example, the call to slideUp occurs immediately, but jQuery processes this call by adding the slideUp animation to the end of the animation queue and returning; the actual slide effect occurs later when it is reached in the animation queue.

In the second example, the show call is immediate, and then when the animation is complete, the slideUp call is slideUp .

The key difference when multiple elements match your selector is that in the first example there is one call to slideUp that adds the slideUp operation to the animation queue for the current set of elements in the jQuery object to which you called it. In the second case, multiple completion callbacks, one for each item upon completion.

Another very important difference was emphasized by Arun P Johny in the comments : if you need to add another animation function for the same elements later, the first example will be added to the queue after slideUp , but in the second example, slideUp will be after this other animation.

But with your code quoted, again, while they take different roads to get there, they end up doing the same.