Learning jQuery 3 - Fifth Edition

Working with a single set of elements

When applying multiple effects to the same set of elements, queuing is easily achieved by chaining those effects. To demonstrate this queuing, we'll revisit Listing 4.17 by moving the Text Size box to the right-hand side, increasing its height and border width. This time, however, we perform the three effects sequentially simply by placing each in its own .animate() method and chaining the three together:

$(() => {  $('div.label')    .click((e) => {      const $switcher = $(e.target).parent();      const paraWidth = $('div.speech p').outerWidth();      const switcherWidth = $switcher.outerWidth();      $switcher        .css('position', 'relative')        .animate({ borderWidth: '5px' }, 'slow') .animate({ left: paraWidth - switcherWidth ...