Learning jQuery 3 - Fifth Edition

Sliding up and sliding down

The fading animations are very useful for items that are outside the flow of the document. For example, these are typical effects to apply to lightbox elements that are overlaid on the page. However, when an element is part of the document flow, calling .fadeIn() on it causes the document to jump to provide the real estate needed for the new element, which is not aesthetically pleasing.

In these cases, jQuery's .slideDown() and .slideUp() methods are the right choice. These effects animate only the height of the selected elements. To have our paragraph appear using a vertical slide effect, we can call .slideDown('slow'):

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