Here’s a quick way to add JQuery sliding effect

by  
Share:
Setting default parameter to a function in javascript

Bored with the native show/hide effect, here’s a quick way to add jQuery sliding effect in your project

Add SlideUp effect

Before using SlideUp, the element must be visible or you must make it visible before calling the function. .slideUp() hides the element using a sliding motion.

$('your id or class').slideUp(); // default syntax
$('your id or class').slideUp('fast'); // for fast effect
$('your id or class').slideUp('slow'); // for slow effect
$('your id or class').slideUp(1000); // or add what ever time you want

Add SlideDown effect

Before using SlideDown, the element must be hidden  or you must make it visible before calling the function. .slideDown() display the element using a sliding motion.

$('your id or class').slideDown(); // default syntax
$('your id or class').slideDown('fast'); // for fast effect
$('your id or class').slideDown('slow'); // for slow effect
$('your id or class').slideDown(1000); // or add what ever time you want

Using SlideToggle effect

If you just want to toggle the state with the sliding motion use SlideToggle. The element if hidden will slide down and vice versa.

$('your id or class').slideToggle(); // default syntax
$('your id or class').slideToggle('fast'); // for fast effect
$('your id or class').slideToggle('slow'); // for slow effect
$('your id or class').slideToggle(1000); // or add what ever time you want

Let us to put all these three animation to use.

<!-- element is hidden by default-->
<div id="s1" display="display:none;">Slide animation effect</div>

<input type="button" value="Slide Down" onclick="$('#s1').show().slideDown();">
<input type="button" value="Slide Up" onclick="$('#s1').show().slideUp();">
<input type="button" value="Slide Toggle" onclick="$('#s1').show().slideToggle();">

Show/ Hide element with jQuery

If you are not a fan of animation,  just the jquery .show() and .hide() method.

<!-- element is hidden by default-->
<div id="s1" display="display:none;">Some default text/div>

<input type="button" value="Show onclick="$('#s1').show();">
<input type="button" value="Hide" onclick="$('#s1').hide();">

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.