Sliding Animation in Jquery

In my previous post i give some overview of the animation in jquery and give detail explanation of the parameters and function which are used for the animation. Now in this post i will try to explain in detail of Sliding effect in jquery and how can you used it. Here is list of function for sliding an element. One thing i will mention here is that all these functions return same object , which you can use for chaining purpose. You can use that return object to call other function as well.

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

Let us start with our example, For this example i had added three buttons named cmdSlideDown, cmdSlideUp and cmdSlideToggle so that you understand the purpose of the buttons by theirs names, and one div element named myDiv which is used for the sliding purpose and i have fill the div element with the black color so that the area of the div is visible to you and you will see the animation of the div element.

First of all i will write the code for the slideDown function and then will explain the code, how the code work what are the required parameters and what are the optional.

$("#cmdSlideDown").click(function()
{
 $("#myDiv").slideDown('slow',AnimationFinished);
});

function AnimationFinished()
{
 alert("Animation finished");
}     

The above code is complete code you can use to pass the maximum number of parameters to the slideDown function. Which are the speed and the callback function to the slideDown Function. First i have bind the click event to the my button control by using the id of the button control which is "cmdSlideDown" and then in the definition of the click event function for the button. I have used the div control id to bind the slideDown function by passing the parameter slow and attaching the call back function to the slideDown function call. Which in this case is the AnimationFinished function , you can replace it with your callback function.if you want to omit the speed parameter then you can and the default value of the speed is used which is the normal speed. As in my previous post i have said that the sliding function only change one property which is the height of the element. In case of slideDown the height of the element is increase and the element is shown. if the element is shown, mean its height is to the maximum then it will not animate the element as it is visible. But if you attach the callback function to the slideDown function then that function is called every time the slideDown function is called whether it animate the element or not.

Here is the code you can use to call the slideUp function of the sliding animation effects. The code is similar to the code for the slideDown only change is the function call which is replace by slideUp.

$("#cmdSlideDown").click(function()
{
 $("#myDiv").slideUp('slow',AnimationFinished);
});

function AnimationFinished()
{
 alert("Animation finished");
}     

The slideUp function is opposite to the slideDown function. What slideUp function do is that it will decrease the height property of the element to hide them. If you provide the speed value or animation time to complete the hiding of the element then it will hide the element in that interval of time. if no speed value is given then the normal parameter is taken as default parameter which has the value of .4 milliseconds to complete the animations.

Here is the last function for the sliding animation category in jquery, which is slideToggle, which perform both the above functionality for you at same time. which are slideDown and slideUp

$("#cmdSlideDown").click(function()
{
 $("#myDiv").slideToggle('slow',AnimationFinished);
});

function AnimationFinished()
{
 alert("Animation finished");
}     

The detail of the slideToggle function is that it will take same number of parameter like the slideDown and slideUp but it perform both the slideDown and slideUp functionality at same time. Mean if you call slideToggle for first time, if the element is hide, then it will increase the height property of the element to show it. or if the element is shown then it will decrease the height of the element to hide it. It will perform slideDown and slideUp functionality in sequence , if element is hide then it will show that element and if the element is shown then it will hide that element. On each slideToggle call it will show or hide the element by sliding motion depending of the state of the element.

Hope you will get some idea about the sliding effect in jquery. You can download the source code from here

All and any comments / bugs / suggestions are welcomed!