Jquery sliding effect
Advertisements
Jquery sliding effect
Click Here for Sliding
Hello World !
Using jQuery you can slide html element up and down. It have following predefined methods for sliding html elements.
- slideDown()
- slideUp()
- slideToggle()
slideDown()
This method is used to slide down an Html elements.
Syntax
$(selector).slideDown(speed,callback);
- Here speed parameter is optional, speed parameter specifies the speed of the hiding/showing, and can take values: "slow", "fast", or milliseconds.
- callback parameter is optional, callback parameter is a function to be executed after the hide() or show() method completes.
Example of slideDown elements
<!DOCTYPE html>
<html>
<head>
<style>
#hide {
padding: 5px;
text-align: center;
background-color: cyan;
border: solid 1px #000;
}
#show {
padding: 50px;
text-align: center;
background-color: cyan;
border: solid 1px #000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#show").slideDown("slow");
});
});
</script>
</head>
<body>
<div id="hide">Click here to slide</div>
<div id="show">Hello World !</div>
</body>
</html>
Output
Click here to slide
Hello World !
slideUp()
This method is used to slide up an Html elements.
Syntax
$(selector).slideUp(speed,callback);
- Here speed parameter is optional, speed parameter specifies the speed of the hiding/showing, and can take values: "slow", "fast", or milliseconds.
- callback parameter is optional, callback parameter is a function to be executed after the hide() or show() method completes.
Example of slideUp elements
<!DOCTYPE html>
<html>
<head>
<style>
#hide {
padding: 5px;
text-align: center;
background-color: cyan;
border: solid 1px #000;
}
#show {
padding: 50px;
text-align: center;
background-color: cyan;
border: solid 1px #000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#show").slideUp("slow");
});
});
</script>
</head>
<body>
<div id="hide">Click here to slide Up</div>
<div id="show">Hello World !</div>
</body>
</html>
Output
Click here to sliding
Hello World !
slideToggle()
This method is used to slide up and down an Html elements. If the elements have been slid down, slideToggle() will slide them up. And If the elements have been slid up, slideToggle() will slide them down.
Syntax
$(selector).slideToggle(speed,callback);
- Here speed parameter is optional, speed parameter specifies the speed of the hiding/showing, and can take values: "slow", "fast", or milliseconds.
- callback parameter is optional, callback parameter is a function to be executed after the hide() or show() method completes.
Example of toggle
<!DOCTYPE html>
<html>
<head>
<style>
#hide {
padding: 5px;
text-align: center;
background-color: cyan;
border: solid 1px #000;
}
#show {
padding: 50px;
text-align: center;
background-color: cyan;
border: solid 1px #000;
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#show").slideToggle("slow");
});
});
</script>
</head>
<body>
<div id="hide">Click Here to slide Up and Down</div>
<div id="show">Hello World !</div>
</body>
</html>
Output
Click here to slide UP
Hello World !
Google Advertisment