Adding Dynamicity Into Your Website by Using jQuery .fadeToggle()

jQuery fadeToggle: Main Tips

• jQuery .fadeToggle() toggles between .fadeIn() and .fadeOut() methods.
• You can add a callback function to run once the animation finishes.

Toggling Opacity

jQuery fade toggle method works by toggling the opacity on the chosen element. In the example below, you can see the color block fading in and out:

$("a").hover(() => {
    $("div").fadeToggle();
});

Here is the syntax you would use to utilize this method:

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

jQuery .fadeToggle() takes three arguments:

• length - the number of milliseconds it takes for the animation to end. You may also use keywords: slow represents 600 ms, and fast - 200 ms.
• easing - a keyword value for if the animation speed is constant (linear), or speeding up (swing).
• callback - the function to execute once the animation is completed.

Note: 400 ms length and swing easing are the default values for jQuery fade toggle.