Easy Tutorial
❮ Prop Length Misc Callbacks Empty ❯

jQuery Effect fadeOut() Method

jQuery Effects Methods

Example

Use the fade-out effect to hide all <p> elements:

$("button").click(function(){
    $("p").fadeOut();
});

Definition and Usage

The fadeOut() method gradually changes the opacity of the selected elements from visible to hidden (fade-out effect).

Note: Hidden elements will not be completely displayed (no longer affecting the layout of the page).

Tip: This method is often used in conjunction with the fadeIn() method.

Syntax

Parameter Description
speed Optional. Specifies the speed of the fade-out effect. Possible values: milliseconds<br> "slow"<br> "fast"
easing Optional. Specifies the speed of the element at different points of the animation. The default value is "swing". Possible values: "swing" - moves slow at the start/end, fast in the middle<br> "linear" - moves at a constant speed. Tip: More easing functions are available in extensions.
callback Optional. A function to be executed after the fadeOut() method completes. To learn more about the callback, visit our jQuery Callback chapter.

Try it - Examples

fadeOut() - Using speed parameter

fadeIn() - Using callback parameter


jQuery Effects Methods

❮ Prop Length Misc Callbacks Empty ❯