jQuery TutorialsLearn about slideDown Function in jQuery slide Animation

Learn about slideDown Function in jQuery slide Animation

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.

<head>
<meta charset="">
<meta name="viewport" content="width=device-width">
<title>jQuery Slide</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#slide-one{
display:none;	
padding:auto;	
font-size:5em;	
width:50%;
padding: 2%;
color: white;
background: grey;
}
</style>
</head>
<body>
<div id="slide-one">This is a slide-down effect</div>
</body>

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.

<script type="text/javascript">
$(document).ready(function(){
	$('#slide-one').slideDown();	
    });
</script>

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.).

<script type="text/javascript">
$(document).ready(function(){
	$('#slide-one').slideDown(2000, "linear");	
    });
</script>

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:

<script type="text/javascript">
$(document).ready(function(){
	$('#slide-one').slideDown(2000, "linear", function() {    
                            $(this).css( "background", "black" );
});	
    });
</script>

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

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -