jQuery Effect - slide
CodingTuting
This is the example of the jQuery slideToggle() method. Learn jQuery with jQuery Tutorial at CodingTuting.Com. You'll find more jQuery Tutorials on this site.jQuery slide effect is used to slide up and slide down the content.
There are 3 kinds of slide effect are in jQuery.
- slideDown()
- slideUp()
- slideToggle()
1) slideDown()
The jQuery effect "slideDown()" is used to slide down the content.
Syntax:
$(selector).slideDown(speed, callback);
slideDown() methods has two optional parameters:-
1. The parameter "speed" is used to change the speed of slide. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.
2. The parameter "callback" is a function, which executes after the slideDown() method completed. We'll learn about callback in the upcoming chapter.
Example:
This will slide down the text after a click on the button.
Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideDown() method. You'll find more jQuery Tutorials on this site.
Code
<head>
<style>
#slideBox
{
padding: 5px;
text-align: center;
background-color: #3b3e48;
border: solid 1px #c3c3c3;
}
#slideBox
{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="slideDown-btn">Slide Down</button>
<div id="slideBox">
<p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideDown() method. You'll find more jQuery Tutorials on this site.</p>
</div>
</body>
Add this jQuery before closing the </body> tag
<script>
$(document).ready(function(){
$("#slideDown-btn").click(function(){
$("#slideBox").slideDown("slow");
});
});
</script>
2) slideUp()
The jQuery effect "slideUp()" is used to slide up the content.
Syntax:
$(selector).slideUp(speed, callback);
slideUp() methods has two optional parameters:-
1. The parameter "speed" is used to change the speed of slide up. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.
2. The parameter "callback" is a function, which executes after the slideUp() method completed. We'll learn about callback in the upcoming chapter.
Example:
This will slide up the text after a click on the button.
Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideUp() method. You'll find more jQuery Tutorials on this site.
Code
<head>
<style>
#slideUpBox
{
padding: 5px;
text-align: center;
background-color: #3b3e48;
border: solid 1px #c3c3c3;
}
#slideUpBox
{
padding: 50px;
}
</style>
</head>
<body>
<button id="slideUp-btn">slide up</button>
<div id="slideUpBox">
<p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideUp() method. You'll find more jQuery Tutorials on this site.</p>
</div>
</body>
Add this jQuery before closing the </body> tag
<script>
$(document).ready(function(){
$("#slideUp-btn").click(function(){
$("#slideUpBox").slideUp("slow");
});
});
</script>
3) slideToggle()
 |
| jQuery slideToggle() Effect | jQuery Tutorial | CodingTuting |
The jQuery effect "slideToggle()" is used to switching in slideUp and the slideDown methods.
Syntax:
$(selector).slideToggle(speed, callback);
slideToggle() methods has two optional parameters:-
1. The parameter "speed" is used to change the speed of toggle effect. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.
2. The parameter "callback" is a function, which executes after the slideToggle() method completed. We'll learn about callback in the upcoming chapter.
Example:
This will toggle (switch) between slide up and slide down effect on the element after a click on the button.
Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideToggle() method. You'll find more jQuery Tutorials on this site.
Code
<head>
<style>
#slideToggleBox
{
padding: 5px;
text-align: center;
background-color: #3b3e48;
border: solid 1px #c3c3c3;
display:none;
}
#slideToggleBox
{
padding: 50px;
}
</style>
</head>
<body>
<button id="slideToggle-btn">Slide Toggle</button>
<div id="slideToggleBox">
<p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideToggle() method. You'll find more jQuery Tutorials on this site.</p>
</div>
</body>
Add this jQuery before closing the </body> tag
<script>
$(document).ready(function(){
$("#slideToggle-btn").click(function(){
$("#slideToggleBox").slideToggle("slow");
});
});
</script>
Thanks for Reading
EmoticonEmoticon