jQuery Tutorial Tutorials jQuery .fadeIn()

jQuery .fadeIn()

The .fadeIn() method in jQuery is used to display a element by changing it's opacity.

jQuery `.fadeIn()` syntax

.fadeIn([duration][,complete]);
.fadeIn(options)
.fadeIn(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

Display all paragraphs with fadeIn animation.

$("p").fadeIn();

Shows all paragraphs slowly,the duration is 600 milliseconds.

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

Shows 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").fadeIn(2000,function(){
   alert("Animation Done.");
 });

Date：2019-08-30 01:38:34 From:www.Lautturi.com author：Lautturi