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
유투브 동영상 및 클립매스 업로드를 위한 MVDO 플러그인 소개
By wipaporn Fri 15 Feb 2019 4:45 pm Board korean Language - 한국어
0
1884
Fri 15 Feb 2019 4:45 pm By wipaporn
Joomla 3.x 홈페이지에서 사진 갤러리를 만들기 위한 MD 갤러리 컴포넌트 소개
By wipaporn Fri 15 Feb 2019 4:36 pm Board korean Language - 한국어
0
1934
Fri 15 Feb 2019 4:36 pm By wipaporn
介绍了editors xtd multicontent,一个将文章从主网站拉入Webclien的插件。
By wipaporn Fri 15 Feb 2019 4:08 pm Board Chinese Language - 简体中文
0
10621
Fri 15 Feb 2019 4:08 pm By wipaporn
介绍MDFiles popular模块将mdfile中的文件显示出来
By wipaporn Fri 15 Feb 2019 4:08 pm Board Chinese Language - 简体中文
0
10711
Fri 15 Feb 2019 4:08 pm By wipaporn
介绍将joomla 1.5升级到joomla 2.5、3.x的 MJupgrade
By wipaporn Fri 15 Feb 2019 4:07 pm Board Chinese Language - 简体中文
0
10726
Fri 15 Feb 2019 4:07 pm By wipaporn
介绍MApplication Form Components工作申请表通过网站。
By wipaporn Fri 15 Feb 2019 4:07 pm Board Chinese Language - 简体中文
0
10864
Fri 15 Feb 2019 4:07 pm By wipaporn
介绍Mod Vinaora访客柜台,用于统计Joomla的网站访问量
By wipaporn Fri 15 Feb 2019 4:07 pm Board Chinese Language - 简体中文
0
19316
Fri 15 Feb 2019 4:07 pm By wipaporn
介绍用于上传youtube视频和clipmass的mvdo插件
By wipaporn Fri 15 Feb 2019 4:07 pm Board Chinese Language - 简体中文
0
10478
Fri 15 Feb 2019 4:07 pm By wipaporn
介绍Mod MDFiles Featured,将文件从MDfiles带到显示
By wipaporn Fri 15 Feb 2019 4:06 pm Board Chinese Language - 简体中文
0
26782
Fri 15 Feb 2019 4:06 pm By wipaporn
介绍用于在Joomla 3.x网站上创建照片库的MD Gallery Components
By wipaporn Fri 15 Feb 2019 4:06 pm Board Chinese Language - 简体中文
0
11033
Fri 15 Feb 2019 4:06 pm By wipaporn
Features Review : Plugin Editors XTD Multicontent membantu dlm mengeluarkan artikel dari Master Site ke Web Clien
By abdkode Fri 15 Feb 2019 2:40 pm Board Bahasa Language
0
4323
Fri 15 Feb 2019 2:40 pm By abdkode
Webmaster에서 Webclient로 데이터 배포를 위한 M MultiSite Content Components 소개
By wipaporn Fri 15 Feb 2019 2:22 pm Board korean Language - 한국어
0
7075
Fri 15 Feb 2019 2:22 pm By wipaporn
마스터 사이트의 도메인 이름 기록을 위한 M MultiSite Content client 소개
By wipaporn Fri 15 Feb 2019 2:20 pm Board korean Language - 한국어
0
10134
Fri 15 Feb 2019 2:20 pm By wipaporn
Mod MD recent 모듈을 소개 한다. phpb 보드는 ๋Joomla에서 보여준다.
By wipaporn Fri 15 Feb 2019 2:18 pm Board korean Language - 한국어
0
2004
Fri 15 Feb 2019 2:18 pm By wipaporn
MDEmbed를 소개한다. 플러그 인에는 링크를 만들고, 비디오, 기사를 업로드하기 위한 버튼이 있으며, 웹 사이트인 Joomla 2.5, 3.x
By wipaporn Fri 15 Feb 2019 2:14 pm Board korean Language - 한국어
0
1993
Fri 15 Feb 2019 2:14 pm By wipaporn
介绍 M MultiSite Content Components,用于将数据从网站管理员分发到Web客户端
By wipaporn Fri 15 Feb 2019 2:01 pm Board Chinese Language - 简体中文
0
14294
Fri 15 Feb 2019 2:01 pm By wipaporn
介绍M MultiSite Content client Components 记录主站点域名
By wipaporn Fri 15 Feb 2019 1:59 pm Board Chinese Language - 简体中文
0
18138
Fri 15 Feb 2019 1:59 pm By wipaporn
介绍mod md recent模块。PHPBB板显示在Joomla上。
By wipaporn Fri 15 Feb 2019 1:54 pm Board Chinese Language - 简体中文
0
19553
Fri 15 Feb 2019 1:54 pm By wipaporn
介绍MDEMBED。该插件有创建链接、上传视频、文章、网站joomla 2.5、3.x的按钮。
By wipaporn Fri 15 Feb 2019 1:52 pm Board Chinese Language - 简体中文
0
10623
Fri 15 Feb 2019 1:52 pm By wipaporn
Introducing MApplication Form Components. Job application forms via the website.
By wipaporn Fri 15 Feb 2019 11:14 am Board English Language
1
3661
Tue 15 Oct 2019 1:20 pm By mindphp