fadeIn() in jQuery
The .fadeIn() method is used to animate the opacity of the matched elements.
Durations are given in milliseconds; higher values are used to indicate slower animations.
It is similar to the .fadeTo() method but that method does not make the element visible.
By setting jQuery.fx.off = true all jQuery effects can be turned off globally , which in turn sets the duration to 0.
- Default value is 400.
- number - Integer values are given in milliseconds.
- slow - It denotes 600 milliseconds.
- fast - It denotes 200 milliseconds.
- easing - It is optional and is used to specify the speed at which the animation progresses.It can have two values.
- swing - It is a default value, animation progresses in an irregular way.
- linear - It specifies that the animation progresses at a constant pace.
- complete - It is optional. It indicates a function which will be executed after the element is hidden.
- options - Options given below are optional
- duration - It can be defined by string or number and is used to determine how long the animation will run.
- easing - It is defined by string and is used to determine for transition which easing function to be used.
- queue - It is denoted by Boolean, and is used to determine whether to place the animation in the effects queue. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it. If it is specified as false, the animation will begin immediately.
- specialEasing - It is an object which contains one or more of the CSS properties and these properties are defined by arguments and its corresponding easing functions.
- step - It is used to denote a function for each element when calling animated property.
- progress - It is used to denote a function to be called after each step of the animation.
- complete - It is used to denote a function, which is called after the animation on an element is complete.
- start - It is used to denote a function, when the elements animation begins.
- done - It is used to denote a function, when the animation on an element completes.
- fail - It is used to denote a function, when the animation of an element fails to complete.
- always - It is used to denote a function, when the animation on an element completes or stops without completing.
Example 1 - fadein specified element
Example 2 - fadein element within specified milliseconds
Example 3 - fadeIn() with complete function
Example 4 - calling complete function using function name
Example 5 - fadein element using easing(linear) value
Example 6 - fadeIn() with options
Example 7 - fadeIn() with options and progress bar