Jquery sliding effect


Prev Tutorial Next Tutorial

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 !

Prev Tutorial Next Tutorial

Advertisements
z
Download Projects

Advertisements

Download WhatsApp Status Video

Buy This Ad Space Only $50 per Month, Ad Size 300X250 Contact on: [email protected] WhatsApp no. 8882538826

Google Adsense Advertisements