jQuery Tutorial Tutorials jQuery .fadeOut()

jQuery .fadeOut()

The .fadeOut() method in jQuery is used to hide the matched elements by fading them to transparent.

jQuery `.fadeOut()` syntax

.fadeOut([duration][,complete]);
.fadeOut(options)
.fadeOut(duration[,easing][,complete]);

Parameter	Type	Description
`duration`	Number,String	determining how long the animation will run.`Default 400ms(normal) fast:200ms slow:600ms`
`complete`	Function	A function to call once the animation is complete.
`easing`	String	an easing function for the transition. `Default swing`
options - `queue`	Boolean,String	A Boolean indicating whether to place the animation in the effects queue.
options - `specialEasing`	PlainObject	An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions.
options - `step`	Function	A function to modify the Tween object to change the value of the property before it is set.
options - `progress`	Function	A function to be called after each step of the animation
options - `complete`	Function	A function to be called when animation is complete
options - `start`	Function	A function to be called when animation begins
options - `done`	Function	A function to be called when the animation on an element completes
options - `fail`	Function	A function to be called when the animation on an element fails to complete
options - `always`	Function	A function always to be called,no matter whether it completes or not

Hide all paragraphs with .fadeOut animation.

$("p").fadeOut();

Hide all paragraphs slowly with animation,the duration is 600 milliseconds.

$("p").fadeOut("slow");

Hide all paragraphs with animation in 2000 milliseconds duration,when the animation is completed,alert a message

it will alert 3 times when the animation completed.Because the complete funtion is called once per matched element.
HTML

<p style="display: none">Learn JavaScript</p>
<p style="display: none">Learn jQuery</p>
<p style="display: none">Learn Python</p>

$("p").fadeOut(2000,function(){
   alert("Animation Done.");
 });

Date：2019-08-30 01:40:03 From:www.Lautturi.com author：Lautturi