Quick Reach
jQuery Slide
jQuery provides slide methods to slide elements of your document. This jquery slider tutorial guides you through the syntax of slide methods with examples.
Using slideDown() method
Syntax
$(selector).slideDown(speed,callback);
- Where selector = An element to slide down, that can be p, div etc.
- Speed = This can be given value in milliseconds, “fast” or “slow”
- Callback = An optional argument, function that will be executed after sliding completes
For example:
$(“#slider”).slideDown(“slow”);
Running Example of slideDown method
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<html>
<head>
<style type=”text/css”>
.demomenu {
width: 220px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #C43209;
color: #333;
}
.linkclass {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
.exclass
{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #e5eecc;
color: 000000;
display:none;
}
</style>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#link1”).click(function () {
$(“.exclass”).slideDown(“1000”);
});
});
</script>
</head>
<body>
<div class=“demomenu”>
<a class=“linkclass” id=“link1” href=“#”>Click here to Slide Down Text</a>
</div>
<p class=“exclass”>This is sliding text example! This is sliding text example!
This is sliding text example! This is sliding text example!
This is sliding text example! This is sliding text example! This is sliding text example!
This is sliding text example!</p>
</body>
</html>
|
Using slideUp() method
Syntax
$(selector).slideUp(speed,callback);
- Where selector = An element to slide up, that can be p, div etc.
- Speed = This can be given value in milliseconds, “fast” or “slow”
- Callback = An optional argument, function that will be executed after sliding completes
For example:
$(“#slider”).slideUp(“slow”);
Running Examples of slideUp method
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
.demomenu {
width: 220px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #C43209;
color: #333;
}
.linkclass {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
.exclass
{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #e5eecc;
color: 000000;
}
</style>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#link1”).click(function () {
$(“.exclass”).slideUp(“fast”);
});
});
</script>
</head>
<body>
<div class=“demomenu”>
<a class=“linkclass” id=“link1” href=“#”>Click here to Slide Up Text</a>
</div>
<p class=“exclass”>This is sliding text example! This is sliding text example!
This is sliding text example! This is sliding text example!
This is sliding text example! This is sliding text example! This is sliding text example!
This is sliding text example!</p>
</body>
</html>
|
Also see
Leave A Comment?