Jquery sliding effect

Advertisements

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

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Pure VPN Privide Lowest Price VPN Just @ $1.65. Per Month with Non Detected IP Lowest Price Non Detected IP VPN

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

Download Projects

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements