Learning jQuery 3 - Fifth Edition

Building effects by hand

We have already seen several prepackaged effects for showing and hiding elements. To begin our discussion of the .animate() method, it will be useful to see how we could achieve the same results by calling .slideToggle() using this lower-level interface. Replacing the .slideToggle() line of the previous example with our custom animation turns out to be quite simple:

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

Listing 4.13

This is not a perfect replacement for .slideToggle(); the actual implementation also animates the ...