1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8"> |
5 |
<title>jQuery UI Effects Test Suite</title> |
6 |
<link rel="stylesheet" href="effects.css"> |
7 |
<script src="../../../jquery-1.9.1.js"></script> |
8 |
<script src="../../../ui/jquery.ui.effect.js"></script> |
9 |
<script src="../../../ui/jquery.ui.effect-blind.js"></script> |
10 |
<script src="../../../ui/jquery.ui.effect-bounce.js"></script> |
11 |
<script src="../../../ui/jquery.ui.effect-clip.js"></script> |
12 |
<script src="../../../ui/jquery.ui.effect-drop.js"></script> |
13 |
<script src="../../../ui/jquery.ui.effect-explode.js"></script> |
14 |
<script src="../../../ui/jquery.ui.effect-fade.js"></script> |
15 |
<script src="../../../ui/jquery.ui.effect-fold.js"></script> |
16 |
<script src="../../../ui/jquery.ui.effect-highlight.js"></script> |
17 |
<script src="../../../ui/jquery.ui.effect-pulsate.js"></script> |
18 |
<script src="../../../ui/jquery.ui.effect-scale.js"></script> |
19 |
<script src="../../../ui/jquery.ui.effect-shake.js"></script> |
20 |
<script src="../../../ui/jquery.ui.effect-slide.js"></script> |
21 |
<script src="../../../ui/jquery.ui.effect-transfer.js"></script> |
22 |
<script src="effects.js"></script> |
23 |
</head> |
24 |
<body> |
25 |
|
26 |
<ul class="effects"> |
27 |
|
28 |
<li> |
29 |
<div class="effect" id="blindUp"> |
30 |
<p>Blind up</p> |
31 |
</div> |
32 |
</li> |
33 |
|
34 |
<li> |
35 |
<div class="effect" id="blindDown"> |
36 |
<p>Blind down</p> |
37 |
</div> |
38 |
</li> |
39 |
|
40 |
<li> |
41 |
<div class="effect" id="blindLeft"> |
42 |
<p>Blind left</p> |
43 |
</div> |
44 |
</li> |
45 |
|
46 |
<li> |
47 |
<div class="effect" id="blindRight"> |
48 |
<p>Blind right</p> |
49 |
</div> |
50 |
</li> |
51 |
|
52 |
<li> |
53 |
<div class="effect" id="bounce3times"> |
54 |
<p>Bounce 3 times</p> |
55 |
</div> |
56 |
</li> |
57 |
|
58 |
<li> |
59 |
<div class="effect" id="clipHorizontally"> |
60 |
<p>Clip horizontally</p> |
61 |
</div> |
62 |
</li> |
63 |
|
64 |
<li> |
65 |
<div class="effect" id="clipVertically"> |
66 |
<p>Clip vertically</p> |
67 |
</div> |
68 |
</li> |
69 |
|
70 |
<li> |
71 |
<div class="effect" id="dropDown"> |
72 |
<p>Drop down</p> |
73 |
</div> |
74 |
</li> |
75 |
|
76 |
<li> |
77 |
<div class="effect" id="dropUp"> |
78 |
<p>Drop up</p> |
79 |
</div> |
80 |
</li> |
81 |
|
82 |
<li> |
83 |
<div class="effect" id="dropLeft"> |
84 |
<p>Drop left</p> |
85 |
</div> |
86 |
</li> |
87 |
|
88 |
<li> |
89 |
<div class="effect" id="dropRight"> |
90 |
<p>Drop right</p> |
91 |
</div> |
92 |
</li> |
93 |
|
94 |
<li> |
95 |
<div class="effect" id="explode9"> |
96 |
<p>Explode in 9 pieces</p> |
97 |
</div> |
98 |
</li> |
99 |
|
100 |
<li> |
101 |
<div class="effect" id="explode36"> |
102 |
<p>Explode in 36 pieces</p> |
103 |
</div> |
104 |
</li> |
105 |
|
106 |
<li> |
107 |
<div class="effect" id="fade"> |
108 |
<p>Fade</p> |
109 |
</div> |
110 |
</li> |
111 |
|
112 |
<li> |
113 |
<div class="effect" id="fold"> |
114 |
<p>Fold</p> |
115 |
</div> |
116 |
</li> |
117 |
|
118 |
<li> |
119 |
<div class="effect" id="highlight"> |
120 |
<p>Highlight</p> |
121 |
</div> |
122 |
</li> |
123 |
|
124 |
<li> |
125 |
<div class="effect" id="pulsate"> |
126 |
<p>Pulsate 2 times</p> |
127 |
</div> |
128 |
</li> |
129 |
|
130 |
<li> |
131 |
<div class="effect" id="puff"> |
132 |
<p>Puff</p> |
133 |
</div> |
134 |
</li> |
135 |
|
136 |
<li> |
137 |
<div class="effect" id="scale"> |
138 |
<p>Scale</p> |
139 |
</div> |
140 |
</li> |
141 |
|
142 |
<li> |
143 |
<div class="effect" id="shake"> |
144 |
<p>Shake</p> |
145 |
</div> |
146 |
</li> |
147 |
|
148 |
<li> |
149 |
<div class="effect" id="size"> |
150 |
<p>Size Default Show/Hide</p> |
151 |
</div> |
152 |
</li> |
153 |
|
154 |
<li> |
155 |
<div class="effect" id="sizeToggle"> |
156 |
<p>Size Toggle</p> |
157 |
</div> |
158 |
</li> |
159 |
|
160 |
<li> |
161 |
<div class="effect" id="slideDown"> |
162 |
<p>Slide down</p> |
163 |
</div> |
164 |
</li> |
165 |
|
166 |
<li> |
167 |
<div class="effect" id="slideUp"> |
168 |
<p>Slide up</p> |
169 |
</div> |
170 |
</li> |
171 |
|
172 |
<li> |
173 |
<div class="effect" id="slideLeft"> |
174 |
<p>Slide left</p> |
175 |
</div> |
176 |
</li> |
177 |
|
178 |
<li> |
179 |
<div class="effect" id="slideRight"> |
180 |
<p>Slide right</p> |
181 |
</div> |
182 |
</li> |
183 |
|
184 |
<li> |
185 |
<div class="effect" id="transfer"> |
186 |
<p>Transfer to first element</p> |
187 |
</div> |
188 |
</li> |
189 |
|
190 |
<li> |
191 |
<div class="effect" id="addClass"> |
192 |
<p>addClass</p> |
193 |
</div> |
194 |
</li> |
195 |
|
196 |
<li> |
197 |
<div class="effect" id="removeClass"> |
198 |
<p>removeClass</p> |
199 |
</div> |
200 |
</li> |
201 |
|
202 |
<li> |
203 |
<div class="effect" id="toggleClass"> |
204 |
<p>toggleClass</p> |
205 |
</div> |
206 |
</li> |
207 |
|
208 |
<li> |
209 |
<div class="effect" id="hide"> |
210 |
<p>hide/show (jQuery)</p> |
211 |
</div> |
212 |
</li> |
213 |
|
214 |
</ul> |
215 |
|
216 |
</body> |
217 |
</html> |