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
使用 Component M Multisite Master 说明手册
By wipaporn Wed 20 Feb 2019 4:30 pm Board Chinese Language - 简体中文
0
19941
Wed 20 Feb 2019 4:30 pm By wipaporn
使用 Component M Multisite Client 说明手册
By wipaporn Wed 20 Feb 2019 4:06 pm Board Chinese Language - 简体中文
0
20787
Wed 20 Feb 2019 4:06 pm By wipaporn
Features Review : M MultiSite Content client Komponen untuk merekodkan Nama Domain Master Site
By abdkode Wed 20 Feb 2019 3:51 pm Board Bahasa Language
0
8049
Wed 20 Feb 2019 3:51 pm By abdkode
使用Module MDFiles Popular 说明手册
By wipaporn Wed 20 Feb 2019 3:35 pm Board Chinese Language - 简体中文
0
24331
Wed 20 Feb 2019 3:35 pm By wipaporn
Features Review : MDFiles Documents membantu menghubungkan artikel ke Component MDFiles
By abdkode Wed 20 Feb 2019 3:33 pm Board Bahasa Language
0
4678
Wed 20 Feb 2019 3:33 pm By abdkode
使用 Module MDFiles Featured 说明手册
By wipaporn Wed 20 Feb 2019 3:04 pm Board Chinese Language - 简体中文
0
25103
Wed 20 Feb 2019 3:04 pm By wipaporn
使用Module MDFiles Categories 说明手册
By wipaporn Wed 20 Feb 2019 2:31 pm Board Chinese Language - 简体中文
0
21871
Wed 20 Feb 2019 2:31 pm By wipaporn
使用 Module MDfiles recent 说明手册
By wipaporn Wed 20 Feb 2019 2:29 pm Board Chinese Language - 简体中文
0
24077
Wed 20 Feb 2019 2:29 pm By wipaporn
使用Component MDFiles说明手册
By wipaporn Wed 20 Feb 2019 12:10 pm Board Chinese Language - 简体中文
0
10773
Wed 20 Feb 2019 12:10 pm By wipaporn
使用 Component MJForm 说明手册
By wipaporn Wed 20 Feb 2019 12:03 pm Board Chinese Language - 简体中文
0
23169
Wed 20 Feb 2019 12:03 pm By wipaporn
Features Review : Plugin Editors XTD Multicontent untuk mengeluarkan artikel dari Master Site ke Web Clien
By abdkode Tue 19 Feb 2019 6:52 pm Board Bahasa Language
0
6495
Tue 19 Feb 2019 6:52 pm By abdkode
Features Review : Mod MDFiles Popular modul menyenaraikan fail popular
By abdkode Tue 19 Feb 2019 5:41 pm Board Bahasa Language
0
5449
Tue 19 Feb 2019 5:41 pm By abdkode
Features Review : Mod MDFiles Featured memaparkan fail-fail yang dipilih dari MDFile untuk dipaparkan pada Joomla
By abdkode Tue 19 Feb 2019 4:39 pm Board Bahasa Language
0
2754
Tue 19 Feb 2019 4:39 pm By abdkode
Features Review : Components Mjform komponen untuk membuat borang laman web
By abdkode Tue 19 Feb 2019 3:23 pm Board Bahasa Language
0
2626
Tue 19 Feb 2019 3:23 pm By abdkode
Mod MDFiles Popular 모듈 소개 MDFile에서 파일을 가져와 표시
By wipaporn Fri 15 Feb 2019 6:06 pm Board korean Language - 한국어
0
6410
Fri 15 Feb 2019 6:06 pm By wipaporn
MDFiles Featured modules를 소개하면 MDFile에서 파일을 가져와 보여준다.
By wipaporn Fri 15 Feb 2019 6:06 pm Board korean Language - 한국어
0
6054
Fri 15 Feb 2019 6:06 pm By wipaporn
마스터 사이트에서 Web Client로 문서를 끌어오기 위한 플러그인인 Editors XTD Multicontent를 소개한다.
By wipaporn Fri 15 Feb 2019 5:48 pm Board korean Language - 한국어
0
1980
Fri 15 Feb 2019 5:48 pm By wipaporn
Joomla 1.5를 Joomla 2.5, 3.X로 업그레이드하기 위한 MJUpgrade 소개
By wipaporn Fri 15 Feb 2019 5:36 pm Board korean Language - 한국어
0
2354
Fri 15 Feb 2019 5:36 pm By wipaporn
MApplication Form Components를 소개한다. 구직 신청서는 웹사이트를 통해 작성된다.
By wipaporn Fri 15 Feb 2019 5:27 pm Board korean Language - 한국어
0
2173
Fri 15 Feb 2019 5:27 pm By wipaporn
Joomla 웹사이트 방문수를 집계하기 위한 "Mod vinaora visitors counter" 소개
By wipaporn Fri 15 Feb 2019 5:09 pm Board korean Language - 한국어
0
2087
Fri 15 Feb 2019 5:09 pm By wipaporn