Learning jQuery 3 - Fifth Edition

Bypassing the queue

But what if we want to move the <div> tag to the right-hand side at the same time as it fades to half opacity? If the two animations were occurring at the same speed, we could simply combine them into a single .animate() method. But, in this example, the fade is using the 'fast' speed while the move to the right-hand side is using the 'slow' speed. Here is where the second form of the .animate() method comes in handy:

$(() => {  $('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: ...