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
Program exchange rate - Information form Bank of Thailand API
By prmindphp Tue 26 Nov 2019 2:34 pm Board English Language
0
106
Tue 26 Nov 2019 2:34 pm By prmindphp
Tracking Thailand Post Program
By prmindphp Mon 25 Nov 2019 5:47 pm Board English Language
0
138
Mon 25 Nov 2019 5:47 pm By prmindphp
Square Root Calculate Program
By prmindphp Fri 22 Nov 2019 11:30 am Board English Language
0
168
Fri 22 Nov 2019 11:30 am By prmindphp
The program calculates the mean, the variable, the standard deviation
By prmindphp Fri 22 Nov 2019 11:12 am Board English Language
0
138
Fri 22 Nov 2019 11:12 am By prmindphp
Introducing the new Mindphp.com Webboard system function (phpbb v.3.2)
By numtan5839 Tue 19 Nov 2019 6:06 pm Board English Language
0
139
Tue 19 Nov 2019 6:06 pm By numtan5839
The most popular currency pairs in the Forex for new traders
By numtan5839 Mon 18 Nov 2019 5:32 pm Board English Language
0
135
Mon 18 Nov 2019 5:32 pm By numtan5839
BIG DATA and Hadoop
By Inglejyoti Mon 18 Nov 2019 4:03 pm Board English Language
0
221
Mon 18 Nov 2019 4:03 pm By Inglejyoti
The most popular currency in the Forex
By numtan5839 Mon 18 Nov 2019 3:24 pm Board English Language
0
123
Mon 18 Nov 2019 3:24 pm By numtan5839
How to use the SQRT function in Excel
By numtan5839 Mon 18 Nov 2019 2:46 pm Board English Language
0
168
Mon 18 Nov 2019 2:46 pm By numtan5839
Deposit money into account with Thailand Post by Bank@post service
By numtan5839 Mon 18 Nov 2019 11:42 am Board English Language
0
186
Mon 18 Nov 2019 11:42 am By numtan5839
Benefits and applications of moving averages
By numtan5839 Mon 18 Nov 2019 10:47 am Board English Language
0
153
Mon 18 Nov 2019 10:47 am By numtan5839
Moving Average
By numtan5839 Sat 16 Nov 2019 2:45 pm Board English Language
0
135
Sat 16 Nov 2019 2:45 pm By numtan5839
weighted arithmetic mean
By numtan5839 Sat 16 Nov 2019 11:56 am Board English Language
0
111
Sat 16 Nov 2019 11:56 am By numtan5839
Digital Marketing Training in Mumbai
By Kanchaan Fri 15 Nov 2019 6:10 pm Board English Language
1
774
Fri 06 Dec 2019 3:16 pm By benjamin28
Thailand Post appease e-commerce with ePacket service
By numtan5839 Fri 15 Nov 2019 5:59 pm Board English Language
0
264
Fri 15 Nov 2019 5:59 pm By numtan5839
The character that precedes Tracking Number - Thailand Post Track & Trace
By numtan5839 Fri 15 Nov 2019 5:09 pm Board English Language
0
111
Fri 15 Nov 2019 5:09 pm By numtan5839
downloading MD Watermark
By bfred Fri 04 Oct 2019 3:21 pm Board English Language
6
1285
Mon 30 Dec 2019 7:26 pm By mindphp
Features Review : Component Mjform Advance untuk meningkatkan form atau borang untuk laman web dgn lebih baik
By abdkode Mon 22 Apr 2019 6:51 pm Board Bahasa Language
0
9092
Mon 22 Apr 2019 6:51 pm By abdkode
Features Review : Mhosting Components untuk mengumpul Packet hosting
By abdkode Mon 22 Apr 2019 6:50 pm Board Bahasa Language
0
1791
Mon 22 Apr 2019 6:50 pm By abdkode
Features Review : Components MD Gallery untuk membuat gelari dalam laman web
By abdkode Mon 22 Apr 2019 6:49 pm Board Bahasa Language
0
3971
Mon 22 Apr 2019 6:49 pm By abdkode