Alternating Between Slide Animation Methods With jQuery .slideToggle()

jQuery slideToggle: Main Tips

• The .slideToggle() method alternates between the slideUp() and slideDown() methods each time it is applied.
• This method can be used to animate the height of any element (i.e., an image).
• jQuery toggle slide belongs to the group of slide effects.

How to Toggle Slide Animations

The jQuery .slideToggle() method alternates between the .slideUp() and .slideDown() methods each time it is applied. In the example below, you can use the same button to both show and hide an image with slide animations:

$("button").click(() => {
    $("img").slideToggle();
});

To toggle slide animations, follow these syntax rules:

$("selector").slideToggle(length, easing, callback);

jQuery .slideToggle() accepts three arguments:

• length - a numeric value (400 by default), indicating how many milliseconds that the animation lasts. Keywords can be used as well: slow (600 ms) and fast (200 ms).
• easing - a keyword (either linear or swing), indicating the changes in the animation speed.
• callback - the name of the function that will run after the animation.