Walk through of jQuery inbuilt functions to create animation

jQuery offers inbuilt functions to achieve animation effects, thus enable programmers to build animated pages for a better UI for the web users. Below are some useful inbuilt functions in jQuery to achieve animation effects.

fadeIn ( [ duration ], [ callback ] ):
This method animates the opacity of the matched elements from 0 to 1 i.e. transparent to opaque.
Accepted Parameter:

• duration: This is the duration of the animation
• callback: This is the callback function on completion of the animation.

fadeOut( [ duration ], [ callback ] ):
This method animates the opacity of the matched elements from 1 to 0 i.e. opaque to transparent.
Accepted Parameter:

• duration: This is the duration of the animation
• callback: This is the callback function on completion of the animation

slideUp( [ duration ], [ callback ] ):
This method animates the height of the matched elements with an upward sliding motion. When the height of the element reaches 0, the css property display of the element is updated to none so that the element is hidden on the page. Accepted Parameter:

• duration: This is the duration of the animation
• callback: This is the callback function on completion of the animation

slideDown( [ duration ], [ callback ] ):
This method animates the height of the matched elements from 0 to the specified maximum height. Thus, it gives slide down effect to the element.
Accepted Parameter:

• duration: This is the duration of the animation
• callback: This is the callback function on completion of the animation

Read "How to use jQuery slideToggle function".

slideToggle( [ duration ], [ callback ] ):
This method is combination of slideUp and slideDown method. This method animates the height of the matched elements. If the element is initially hidden, it will slide down and makes it visible. If the element is initially visible, it will slide up and make hidden on the page.
Accepted Parameter:

• duration: This is the duration of the animation
• callback: This is the callback function on completion of the animation

stop ( [ clearQueue ], [ jumpToEnd ] ):
This method stops the currently running animations on the page.
Accepted Parameter:

• clearQueue: This indicates whether any queued up animations are required to be cleared. The default value is false.
• jumpToEnd: This indicates if the current animation is to be cleared immediately. The default value is false.

animate ( properties, [ duration ], [ easing ], [ complete ] ):
This method allows us to create custom animation effects on any numeric css property.
Accepted Parameter:

• properties: This is the map of css properties to animate, for e.g. width, height, fontSize, borderWidth, opacity, etc.
• duration: Duration of the animation in milliseconds. The constants "slow" and "fast" can be used to specify the durations, and they represent 600 ms and 200 ms respectively.
• easing: Easing indicates the speed of the animation at different points during the animation. jQuery provides inbuilt swing and linear easing functions. Various plugins can be interfaced if other easing functions are required.
• complete: This indicates the callback function on completion of the animation.

jQuery.fx.off:
Let's assume that you had written lots of jQuery code and you want to turn off all the jQuery animation because your client doesn't like it due to slow response on some hardware device. What will you do? Either you can find all required code and remove it but that's time consuming or you can use jQuery.fx.off property to make your life easy. See Demo

Feel free to contact me for any help related to jQuery, I will gladly help you.