jQuery slideDown()
jQuery Tutorial » jQuery slideDown()
What does jQuery slideDown do?
The slideDown() is a method to create the sliding effect by making the matched element visible through sliding motion.
Syntax:
$(selector).slideDown(speed,callback);
$(selector).slideDown();
The optional speed parameter specifies the duration of the effect and may have the following values as "slow", "fast" or milliseconds.
The next callback parameter which can also be optional and is a function to call once the animation is complete..
easing specifies the easing function to be used for transition.
jQuery slideDown() without any parameter
When the slideDown() jQuery method is used without any input value as speed and callback, it takes the default value for animation effect.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".buttt").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body style="background-color: #FF9;">
<h3 style="font-family: Verdana, Geneva, sans-serif;">'slideDown()' method used without paramter</h3>
<button class="buttt">My Slide down paragraph</button>
<p style="display: none;font-family: 'Comic Sans MS', cursive; font-size:18px">My paragraph is displayed with sliding motion,<br />
after clicking 'My Slide down paragraph' button.</p>
</body>
</html>
Related subjects:
jQuery slideUp
jQuery fadeout
Effects hide / show
jQuery selectors
Tags: jQuery slideDown: not working, slideup, slidetoggle, slide down toggle, easing, slide left, is not a function
callback, jumps, speed, in css, tr, alternative,
What does jQuery slideDown do?
What is jQuery slideToggle?
How do you animate a slide in jQuery?
How do you toggle slideUp and slideDown in jQuery?
slideDown With Duration Parameter - Example
slideDown() method can accepts the first input argument like duration parameter value meaning: for how long the effect would run.
duration any number can be given or just a keyword as: “slow” or “fast” can be used which is for 2000 milliseconds (2 seconds) and 4000 milliseconds ()4 seconds respectively. For example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".buttt").click(function(){
$("p").slideDown(3000);
});
});
</script>
</head>
<body style="background-color: #FF9;">
<h3 style="font-family: Verdana, Geneva, sans-serif;">'slideDown()' method used paramter 3000 mms</h3>
<button class="buttt">My Slide down paragraph</button>
<p style="display: none;font-family: 'Comic Sans MS', cursive; font-size:18px">My paragraph is displayed with sliding motion,<br />
after clicking 'My Slide down paragraph' button used paramter 3000 mms.</p>
</body>
</html>
Various ways with duration parameter for using slideDown() are discussed in the above example.
slideDown() With ‘easing’ Parameter
The easing (relaxation) parameter allows the user to decide the speed of the effect they need at different times. It has only two possible values, namely:
- ‘Swing’: speed of the sliding is slower at the beginning and then at the end, faster in the middle.
- ‘Linear’: speed of the sliding effect is constant throughout the all execution sliding.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("p").slideDown(2500,"linear");
});
});
</script>
</head>
<body style="background-color: #FF9;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">'slideDown()' method is used with 'easing' paramter</h3>
<button class="btn">Slide down with 'easing' paramter</button>
<p style="display: none;font-family: 'Comic Sans MS', cursive; font-size:18px">This paragraph is displayed with sliding<br />
motion in a linear speed,<br />
after clicking 'Slide down with 'easing' paramter' button.</p>
</body>
</html>
slideDown() using ‘callback’ Parameter
This article is about jQuery's in-built method slideDown(). We seen its functionality and how we can use it in our web pages.
Callback parameter sets the function name which gets fired once the sliding effect gets completed.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("p").slideDown(function(){
alert("slideDown() method is finished!");
});
});
});
</script>
</head>
<body style="background-color: #FF9;">
<h3 style="font-family: Verdana, Geneva, sans-serif;">'slideDown()' method with 'callback' (alert) paramter</h3>
<button class="btn">Slide down with 'callback' (alert) paramter</button>
<p style="display: none;font-family: 'Comic Sans MS', cursive; font-size:18px">The Alert message <strong>'callback'</strong> appeared from callback function<br>
after the text message being visible.</p>
</body>
</html>
jQuery slideDown: not working, slideup, slidetoggle, slide down toggle, easing, slide left, is not a function
callback, jumps, speed, in css, tr, alternative,
What does jQuery slideDown do?
What is jQuery slideToggle?
How do you animate a slide in jQuery?
How do you toggle slideUp and slideDown in jQuery?
JQuery slideDown() - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.