jQuery. How is queue() different from using callback function for something is done?

Question

html:

<span>hello world!</span>

js: (using callback)

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow', function() {
    // callback after fontsize increased
    $(this).text(  $(this).text() + ' rolled! ' );
  });
});

So that every time SPAN is click, text 'rolled' appended after font size increased, instead of happening together.

And it can be done by using queue() as well like this:

js: (using queue())

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow'})
  .queue(function() {
    $(this).text(  $(this).text() + ' rolled! ' );
  });
});

I am not sure what is the difference between them. both do the same thing.

Why is queue() better/prefer than using callback, (or why is not ) ? What is special about queue()?

Thanks.

Leslie

check this thread - #1058658 – Bigford

Answer 1

You can put more events (which you specifie else in your code) in the same queue as your animation is put in.

So the callback will be executed immediately after your animation is ready, but in case of using queue() there may be other events in the queue that will be executed first.

The advantage of this behaviour is that no concurrent events (slide up and slide down for example) will be executed at the same time, which would give weird things.

Example:

$('div').click(function() {
  $(this).animate({
    color: 'green'
  }, 'slow'})
  .queue(function() {
    $(this).text( ' got colored! ' );
  });
});

$('span').click(function() {
  $(this).animate({
    fontSize: '+=10px'
  }, 'slow'})
  .queue(function() {
    $(this).text(  ' got bigger! ' );
  });
});

If you first click the div and immediately after that the span, now you can be sure that the queue of the div will be executed first, and that when it's ready, the queue of the span will be executed.

In case of a callback, the one belonging to the animation that is ready first, will be executed first. And if they would be ready at the same time, the would both be executed at the same time. Which would result in, in this case, not seeing either the 'got colored!' text or the 'got bigger!' text.

Furr

thanks for answering, but hard to understand, do you have an example? – Leslie

@tangelo I don't understand this answer at all. The example does not match your description. Can you explain how the "div" animation is related to the "span" animation? – Commence

@Scott Rippey: You're right, the example doesnt completely match the description. In the example I also wanted to demonstrate that animations on different objects, will end up in the same queue (unless you specify a different queue name). – Furr

@tangelo If I understand correctly, when you click the "div", and then immediately click the "span", they will both animate simultaneously. The "span" will not wait until "div" animations have completed, because they're on 2 completely different queues. – Commence

@Scott Rippey: No, they will end up in the same queue. So the one on span will wait for the one on div to be finished. – Furr

@tangelo The span definitely doesn't wait for the div to finish. They run concurrently. jsfiddle.net/Kt9mL – Commence

Answer 2

Using the callback parameter is exactly the same as using the .queue(callback) method.
When you supply a callback to any animation, it just queues the callback the same way as .queue.

.queue(callback) is just another way to add a callback separately from your animation.
There's perfectly valid reasons to do so:

$(this).animate(...);
if (shouldDoCallback) {
    $(this).queue(...);
}

Commence