Learn about slideDown Function in jQuery slide Animation

0
1954
jQuery-slide-animations-1

jQuery-slide-animations-1

In this tutorial we’re going to take a look at jQuery slide animations. A slide animation is a jQuery effect that slides a specific element. Commonly used jQuery slide functions are slideUp, slideDown and slideToggle. We’ll start by taking a look at slideDown.

slideDown
This function causes lower parts of the page to slide down, making way for the revealed (sliding) item.

For our example, lets create and style a div element to apply the slideDown effect to. The element will slide down as soon as a visitor enters or reloads the page. I’ve set up a div of id “slide-one” and set its display to “none” in order to hide it.

We will show this element with jQuery when the document has loaded.

Lets select our element by using its id and apply the slideDown function on it.

The .slideDown() function works as it is, using defaults, but we can also give it a callback function and a variety of parameters to specify how the effect will take place (“style” the effect, if you may), such as speed. You can read about the variety of parameters and callback function in the jQuery documentation at http://api.jquery.com/slideDown/

For the sake of this example, we’ll give the slide effect a speed of 2000 (milliseconds = 2 seconds) and an easing of “linear”(Easing specifies the speed at which the animation progresses at different time points.  With “linear”, the animation progresses at a constant pace.).

We can also add a callback function on the element which would trigger once when the animation is complete. This can be useful for stringing different animations together in sequence.

Learn Javascript And JQuery From Scratch

To finish-off, lets create a callback function that would change the background color once the sliding is complete, like so:

Where $(this) is set to the DOM element being animated.

As a result, the animated element’s background changes from grey to black.

Snapshot taken during the animation:
before animation

At end of the animation:
after animation

In conclusion, this time we’ve learned about slide animations in jQuery using the slideDown function. We have given the function several (optional) parameters to specify speed and added a callback function which is applied on the selected element and triggered once the animation completes.

Next, we will learn how to use the slideToggle animation and show how you can link the animation to a trigger event.

LEAVE A REPLY

Please enter your comment!
Please enter your name here