Learning jQuery 3 - Fifth Edition

Queuing effects manually

One final observation about queuing effects on a single set of elements is that queuing does not automatically apply to other non-effect methods such as .css(). So, let's suppose we wanted to change the background color of <div id="switcher"> to red after the .slideUp() method, but before the slideDown() method.

We could try doing it like this:

$(() => {  $('div.label')    .click((e) => {      const $switcher = $(e.target).parent();      const paraWidth = $('div.speech p').outerWidth();      const switcherWidth = $switcher.outerWidth();      $switcher        .css('position', 'relative')        .fadeTo('fast', 0.5)        .animate(          { left: paraWidth - switcherWidth },          { duration: 'slow', queue: false }        )        .fadeTo('slow', 1.0)        .slideUp('slow') .css('backgroundColor', ...