Learning jQuery 3 - Fifth Edition

Fading in and fading out

While the animated .show() and .hide() methods are certainly flashy, in practice, they animate more properties than are useful. Fortunately, jQuery offers a couple of other prebuilt animations for a more subtle effect. For example, to have the whole paragraph appear just by gradually increasing the opacity, we can use fadeIn('slow') instead:

$(() => {  $('p')    .eq(1)    .hide();  $('a.more')    .click((e) => {      e.preventDefault();      $('p')        .eq(1)        .fadeIn('slow');      $(e.target)        .hide();    });});

Listing 4.9

Now when we look at the paragraph during the effect, it looks like this:

The difference here is that the .fadeIn() effect starts ...