Effects In Jquery

After long time wait and away to the web development, i came back to the web development, In this post i will try to give you an over view of the effects provided by the jquery and how you can use them in your web project give animated look.
Jquery provide the following categories of the effect you can you use.

1. Basic
2. Sliding
3. Fading
4. Custom

1- Basic:

The basic animation include

Function Name
Function Name
show()
show(speed, callback)
hide()
hide(speed, callback)
toggle()
toggle(speed, callback)

The show, hide and toggle function are simple used to show/hide a control. The function on left side takes no parameter and will show or hide the control immediately with not animation or effect. And the toggle function will do both show and hide functionality for you, if the control is hidden then it will display and if the control is shown then it will hidden. The function on the right side will take parameter, one is speed and one is the callback function which is executed when the animation/effect is finished. The show/hide and toggle function will change the width , height and the opacity of the control to hide/show the control at same time. Here is the detail of the speed parameter which is passed to the show, hide or toggle function.

Speed Parameter:

The speed parameter specify how long it will take to finished the show/hide of the control, in other worlds you can say how long it will tak to show/hide the control.You can pass speed parameter in string or number format, In case of string you can pass normal, slow and fast and in case of number format you can pass number to the function. If you provide the number as speed to the function then the number is treated as millisecond duration to animated the control. Higher the value of the speed slower the animation is and lower the value of the speed as number faster the animation is. The normal string parameter will take .4 seconds to complete the animation and the slow string parameter takes .6 seconds and the fast will take .2 seconds to complete the animation. So it is up to you whether you use the string or number as speed parameter to pass the show/hide/toggle function for animations.

2- Sliding

The sliding category of the effect contain only three functions

Function Name
Function Name
slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)

The above three sliding function will take same number of parameters which are the speed and the callback.The sliding function only animate the height of the matching elements, only one property of the control which is different from the show/hide function which animate the width, height and the opacity of the element at same time. You can pass speed parameter to the sliding function if you which may be either string value normal, slow or fast or any number in milliseconds, if you don't pass any speed parameter then normal is consider. And the second parameter which is the callback function you can use the callback function to execute the animation in a sequence. Mean if one animation finished then second one started and then so on and on. The SlideDown function will increase the height of the element to animate it, and the slideUp will decrease the height of the function to animate it until the element is hide.

3- Fading

The fading category consist of the following three functions

Function Name
Function Name
fadeIn(speed, callback)
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)

The fading function will work on the opacity property of the element. As previous effect function like show, hide, slideUp , slideDown etc , it will take the speed parameter and describe above and the callback function if you want to do some functionality on completion of the animation. The fadeIn function will display the element by fading them to opaque and the fadeOut function will disappear the element by fadding them to transparent. And the last fadeTo function will take one extra parameter which is the opacity, you can pass the opacity in the rang of 0 to 1.

Hope you will get some idea about the Effect/animation in jquery, in the next or coming post i will try to explain you the effect/animation by giving examples

All and any comments / bugs / suggestions are welcomed!