Learning jQuery 3 - Fifth Edition

Queuing with callbacks

In order to allow queuing effects on different elements, jQuery provides a callback function for each effect method. As we have seen with event handlers and with the .queue() method, callbacks are simply functions passed as method arguments. In the case of effects, they appear as the last argument of the method.

If we use a callback to queue the two slide effects, we can have the fourth paragraph slide down before the third paragraph slides up. Let's first try moving the .slideUp() call into the .slideDown() method's completion callback:

$(() => {   $('p')    .eq(2)    .css('border', '1px solid #333')    .click((e) => {      $(e.target)        .next()        .slideDown('slow', () => {          $(e.target).slideUp('slow');        });    });  $('p')    .eq(3) .css('backgroundColor', ...