forked from NinjaBCN/zepto-slide-transition
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
83 lines (71 loc) · 3.93 KB
/
demo.html
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Demo zepto plugin : slide transition</title>
<style>
input { display: block; }
</style>
</head>
<body>
<h1>Demo zepto plugin : slide transition</h1>
<!-- SlideDown -->
<h2>SlideDown</h2>
<input type="button" value="Show" id="slideDown-button" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam, ligula eget scelerisque
adipiscing, orci est pulvinar nisi, sit amet posuere elit lectus vitae arcu. Duis tincidunt,
dolor vitae porta imperdiet, erat dolor dapibus enim, non mollis sem nisi vel eros. Praesent
nunc neque, pellentesque at suscipit non, eleifend nec libero. Vestibulum rhoncus pharetra
imperdiet. Ut nibh ligula, gravida in sagittis cursus, semper ut orci. Phasellus euismod augue
vel elit imperdiet ut rhoncus ante pretium. Etiam in mauris sed ante malesuada semper quis vel
dui. Phasellus eu tempor elit. Quisque ut nunc a tellus faucibus porta in non orci.
</p>
<!-- SlideUp -->
<h2>SlideUp</h2>
<input type="button" value="Hide" id="slideUp-button" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam, ligula eget scelerisque
adipiscing, orci est pulvinar nisi, sit amet posuere elit lectus vitae arcu. Duis tincidunt,
dolor vitae porta imperdiet, erat dolor dapibus enim, non mollis sem nisi vel eros. Praesent
nunc neque, pellentesque at suscipit non, eleifend nec libero. Vestibulum rhoncus pharetra
imperdiet. Ut nibh ligula, gravida in sagittis cursus, semper ut orci. Phasellus euismod augue
vel elit imperdiet ut rhoncus ante pretium. Etiam in mauris sed ante malesuada semper quis vel
dui. Phasellus eu tempor elit. Quisque ut nunc a tellus faucibus porta in non orci.
</p>
<!-- SlideToggle -->
<h2>SlideToggle</h2>
<input type="button" value="Hide/Show" id="slideToggle-button" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam, ligula eget scelerisque
adipiscing, orci est pulvinar nisi, sit amet posuere elit lectus vitae arcu. Duis tincidunt,
dolor vitae porta imperdiet, erat dolor dapibus enim, non mollis sem nisi vel eros. Praesent
nunc neque, pellentesque at suscipit non, eleifend nec libero. Vestibulum rhoncus pharetra
imperdiet. Ut nibh ligula, gravida in sagittis cursus, semper ut orci. Phasellus euismod augue
vel elit imperdiet ut rhoncus ante pretium. Etiam in mauris sed ante malesuada semper quis vel
dui. Phasellus eu tempor elit. Quisque ut nunc a tellus faucibus porta in non orci.
</p>
<!-- Zepto v1.0-1-ga3cab6c : http://zeptojs.com/ -->
<script src="zepto.min.js"></script>
<!-- Zepto plugin : slide transition -->
<script src="zepto-slide-transition.js"></script>
<script>
$(document).ready(function(){
// Hide the p element to slideDown it
$('#slideDown-button').next('p').hide();
// SlideDown
$('#slideDown-button').click(function(){
$('#slideDown-button').next('p').slideDown();
});
// SlideUp
$('#slideUp-button').click(function(){
$('#slideUp-button').next('p').slideUp();
});
// SlideUp
$('#slideToggle-button').click(function(){
$('#slideToggle-button').next('p').slideToggle();
});
});
</script>
</body>
</html>