Display Sliding Effects Using JQuery

JQuery has very cool effects for sliding up and/or down an HTML layer. There are 3 functions that can be used namely slideUp(), slideDown() and toggle(). The 3 have stark differences though.

toggle() – can be called whether a layer is visible or hidden. If a layer is clicked and it is hidden, toggle() will slide open the layer to display it. Clicking it again will hide the layer. The animation for toggle() is different from both slideUp() and slideDown(). The movement starts from the upper left corner going to the lower right corner if it will display the layer. Hiding it will make the animation go from lower right to upper left.

slideUp() – this function will hide the layer by animating its area sliding it up vertically. the function can take parameters to determine its animation speed. I usually use the ‘fast’ parameter.

slideDown() – this function does the opposite of slideUp(). these two functions make up toggle()’s functionality but the animation is done vertically.

Related Posts Plugin for WordPress, Blogger...

Leave a Reply

Your email address will not be published. Required fields are marked *