Learning jQuery 3 - Fifth Edition

Animating multiple properties at once

With the .animate() method, we can modify any combination of properties simultaneously. For example, to create a simultaneous sliding and fading effect when toggling the second paragraph, we simply add opacity to the properties that are passed to .animate():

$(() => {  const $firstPara = $('p')    .eq(1)    .hide();  $('a.more')    .click((e) => {      e.preventDefault();      $firstPara.animate({        opacity: 'toggle',        height: 'toggle'      }, 'slow');      $(e.target)        .text(          $(e.target).text() === 'read more' ?            'read less' : 'read more'        );    }); }); 

Listing 4.14

Additionally, we have not only the style properties used for the shorthand effect methods at our disposal, but also numeric CSS properties such as left, top, fontSize, margin ...