User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive
 

jQuery Sliding Methods

jQuery has the following slide methods:

  • slideDown()
  • slideUp()
  • slideToggle()

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after the sliding completes.

 

jQuery slideDown() Method

The jQuery slideDown() method is used to slide down an element.

Syntax:

$(selector).slideDown(speed,callback);

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

 

jQuery slideUp() Method

The jQuery slideUp() method is used to slide up an element.

Syntax:

$(selector).slideUp(speed,callback);

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

 

jQuery slideToggle() Method

The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.

If the elements have been slid down, slideToggle() will slide them up.

If the elements have been slid up, slideToggle() will slide them down.

Syntax:

$(selector).slideToggle(speed,callback);

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

</body>
</html>
Recent Topics
Subject
Post Reply
Open
Recent
How To Add New Facebook Friends using Facebook Phone Number?
By Anonymous Tue 07 Jan 2020 4:20 pm Board English Language
0
758
Tue 07 Jan 2020 4:20 pm By Anonymous
DBA Training Institute
By Shrutiii Wed 01 Jan 2020 3:06 pm Board English Language
0
793
Wed 01 Jan 2020 3:06 pm By Shrutiii
Tools for calculating the withholding tax easily reduce large tax
By prmindphp Wed 25 Dec 2019 6:56 pm Board English Language
0
793
Wed 25 Dec 2019 6:56 pm By prmindphp
Helper to calculate interest rates for investors
By prmindphp Tue 24 Dec 2019 6:52 pm Board English Language
0
862
Tue 24 Dec 2019 6:52 pm By prmindphp
Plan your savings easily with FV (Future Value) Calculator
By prmindphp Mon 23 Dec 2019 7:28 pm Board English Language
0
747
Mon 23 Dec 2019 7:28 pm By prmindphp
Payment Calculator, Installment calculation to make decisions
By prmindphp Fri 20 Dec 2019 6:00 pm Board English Language
0
797
Fri 20 Dec 2019 6:00 pm By prmindphp
Program Calculate Home Loan, Tools that will help you calculate home loans easily and quickly
By prmindphp Thu 19 Dec 2019 6:59 pm Board English Language
0
866
Thu 19 Dec 2019 6:59 pm By prmindphp
The website loads slowly ? The image size is not proportional, MImageoptimize Plugin of Joomla can help
By prmindphp Tue 17 Dec 2019 7:05 pm Board English Language
0
751
Tue 17 Dec 2019 7:05 pm By prmindphp
Calculation program Number of Periods (NPER)
By prmindphp Mon 16 Dec 2019 7:21 pm Board English Language
0
849
Mon 16 Dec 2019 7:21 pm By prmindphp
Calculation program after including VAT
By prmindphp Fri 13 Dec 2019 5:32 pm Board English Language
0
1054
Fri 13 Dec 2019 5:32 pm By prmindphp
Plugin Content MChangelog ,helps add content that has changed, update, and fix the problem
By prmindphp Thu 12 Dec 2019 6:46 pm Board English Language
0
876
Thu 12 Dec 2019 6:46 pm By prmindphp
Pace Calculator
By prmindphp Wed 11 Dec 2019 6:53 pm Board English Language
0
813
Wed 11 Dec 2019 6:53 pm By prmindphp
Introducing to MooZiiCart's Coupons feature, create coupons on website sell products online it is certain to boost sales
By prmindphp Mon 09 Dec 2019 11:06 am Board English Language
0
770
Mon 09 Dec 2019 11:06 am By prmindphp
Introducing to MooZii Opencart - Template MooZiicart create a beautiful website by yourself
By prmindphp Fri 06 Dec 2019 10:47 am Board English Language
0
754
Fri 06 Dec 2019 10:47 am By prmindphp
Introducing the new Mindphp.com Webboard system function (phpbb v.3.2)
By mindphp Wed 04 Dec 2019 8:45 pm Board English Language
0
671
Wed 04 Dec 2019 8:45 pm By mindphp
Module "Login" of MooZiicart easy to use, just install
By prmindphp Tue 03 Dec 2019 1:32 pm Board English Language
0
172
Tue 03 Dec 2019 1:32 pm By prmindphp
Module "MooZiiCart Search" of MooZiicart for search keywords of what we want
By prmindphp Mon 02 Dec 2019 11:31 am Board English Language
0
187
Mon 02 Dec 2019 11:31 am By prmindphp
Features Component MooZiiCart in Joomla for create website to sell products online
By prmindphp Sat 30 Nov 2019 7:00 pm Board English Language
2
2173
Wed 08 Apr 2020 6:51 pm By prmindphp
Business Analyst Training
By NehaaB Fri 29 Nov 2019 5:27 pm Board English Language
0
103
Fri 29 Nov 2019 5:27 pm By NehaaB
Program convert area
By prmindphp Wed 27 Nov 2019 11:26 am Board English Language
0
101
Wed 27 Nov 2019 11:26 am By prmindphp