JQuery Sliding effects are used to show or hide an elements in a web page. It is done through adjustment of height, width, margin and opacity.
By having these adjustments, we can slide any div top to bottom or bottom to top. We have three different methods to slide an element in html page.
[tie_list type=”checklist”]
- slideDown()
- slideUp()
- slideToggle()
[/tie_list]
JQuery Sliding – slideDown() :
slideDown() is a method in JQuery. It is used to make all matched elements are sliding down.
[box type=”shadow” align=”alignleft” class=”” width=”100%”]
$(selector).slideDown(speed, callback);
[/box]
The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes.
slideDown() Example :
[sourcecode language=”html”]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #027d3a;
margin: 3px;
width: 80px;
height: 40px;
display: none;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$( document.body ).click(function () {
if ( $( "div:first" ).is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).hide();
}
});
</script>
</body>
</html>
[/sourcecode]
JQuery Sliding – slideUp() :
slideUp() is a method in JQuery. It is used to make all matched elements are sliding up.
[box type=”shadow” align=”alignleft” class=”” width=”100%”]
$(selector).slideUp(speed, callback);
[/box]
The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes.
slideUp() Example :
[sourcecode language=”html”]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<style>
p {
width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>SlideUp</button>
<p>
Just abserve carefully, new we are going to
<i>slide up</i> this paragraph.
</p>
<script>
$( "button" ).click(function() {
$( "p" ).slideUp( "slow" );
});
</script>
</body>
</html>
[/sourcecode]
JQuery Sliding – slideToggle()
Toggle method is a method in JQuery, it is used to toggle between the slideUp() and the slideDown() elements. Initially the element is slide down, then the element will be hidden and vice versa.
The only advantage of slideToggle() method is, it can maintain the state of the event. We don’t bother about the state, whether the element is in slideUp or slideDown state.
[box type=”shadow” align=”alignleft” class=”” width=”100%”]
$(selector).slideToggle(speed,callback);
[/box]
The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes.
slideToggle() Example :
[sourcecode language=”html”]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<style>
p {
width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle</button>
<p>
Just observe carefully, now we are going to
<em>Toggling</em> this paragraph.
</p>
<script>
$( "button" ).click(function() {
$( "p" ).slideToggle( "slow" );
});
</script>
</body>
</html>
[/sourcecode]
Happy Learning 🙂
