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
介绍Paytoread。插件只显示一些文本。
By wipaporn Wed 13 Feb 2019 3:17 pm Board Chinese Language - 简体中文
0
286
Wed 13 Feb 2019 3:17 pm By wipaporn
介绍插件MD水印(MD水印插件),自动水印插件
By wipaporn Wed 13 Feb 2019 3:15 pm Board Chinese Language - 简体中文
0
1038
Wed 13 Feb 2019 3:15 pm By wipaporn
Introducing Plugin MD Watermark, plug for automatic watermarking
By wipaporn Wed 13 Feb 2019 3:11 pm Board English Language
0
1336
Wed 13 Feb 2019 3:11 pm By wipaporn
Introducing PayToRead. The plugin shows only some text.
By wipaporn Wed 13 Feb 2019 3:08 pm Board English Language
0
1442
Wed 13 Feb 2019 3:08 pm By wipaporn
Introducing Component MFacebook to help with website membership registration with Facebook
By wipaporn Wed 13 Feb 2019 3:06 pm Board English Language
0
1409
Wed 13 Feb 2019 3:06 pm By wipaporn
Introducing Mrelated Article Specific Category Module (Storage browsing history).
By wipaporn Wed 13 Feb 2019 3:03 pm Board English Language
0
1561
Wed 13 Feb 2019 3:03 pm By wipaporn
Introducing Mod MDFiles Categories Module Bring Categories from MDFile.
By wipaporn Wed 13 Feb 2019 2:59 pm Board English Language
0
5311
Wed 13 Feb 2019 2:59 pm By wipaporn
Introducing the Mod MDFile recent module to show files from MDFile
By wipaporn Wed 13 Feb 2019 2:56 pm Board English Language
0
6578
Wed 13 Feb 2019 2:56 pm By wipaporn
Introducing MDFile Components for Joomla, helping to download document files on the website.
By wipaporn Wed 13 Feb 2019 2:49 pm Board English Language
3
2665
Wed 29 Apr 2020 11:49 am By mindphp
Features Review : Components MDFile membantu memuat turun fail dokumen di laman web.
By abdkode Wed 13 Feb 2019 2:37 pm Board Bahasa Language
0
988
Wed 13 Feb 2019 2:37 pm By abdkode
Features Review : Mod MDFile recent Module yang menunjukkan fail yang diupload
By abdkode Tue 12 Feb 2019 6:45 pm Board Bahasa Language
0
1335
Tue 12 Feb 2019 6:45 pm By abdkode
Features Review : Plugin MD Watermark memudahkan dalam meletakan tanda air atau watermark
By abdkode Tue 12 Feb 2019 4:20 pm Board Bahasa Language
0
690
Tue 12 Feb 2019 4:20 pm By abdkode
这个(Pace)是什么?
By Parichat Wed 06 Feb 2019 7:25 pm Board Chinese Language - 简体中文
0
669
Wed 06 Feb 2019 7:25 pm By Parichat
pace 가 뭐죠?
By Parichat Wed 06 Feb 2019 7:25 pm Board korean Language - 한국어
0
449
Wed 06 Feb 2019 7:25 pm By Parichat
Mindphp webboard 등록하는 방법
By wipaporn Wed 06 Feb 2019 6:12 pm Board korean Language - 한국어
0
96
Wed 06 Feb 2019 6:12 pm By wipaporn
minephp webboard 注册方法
By wipaporn Wed 06 Feb 2019 5:49 pm Board Chinese Language - 简体中文
0
172
Wed 06 Feb 2019 5:49 pm By wipaporn
How to register minephp webboard
By wipaporn Wed 06 Feb 2019 5:30 pm Board English Language
0
337
Wed 06 Feb 2019 5:30 pm By wipaporn
Let's get to know Korea
By wipaporn Mon 04 Feb 2019 8:04 pm Board korean Language - 한국어
0
511
Mon 04 Feb 2019 8:04 pm By wipaporn
Let's get to know China
By wipaporn Mon 04 Feb 2019 8:03 pm Board English Language
0
383
Mon 04 Feb 2019 8:03 pm By wipaporn
Apa itu Pace ? Masa yang diambil dalam 1 Kilometer atau 1 mile
By abdkode Mon 04 Feb 2019 7:31 pm Board Bahasa Language
0
666
Mon 04 Feb 2019 7:31 pm By abdkode