|
1 /** |
|
2 * Interface Elements for jQuery |
|
3 * FX - slide |
|
4 * |
|
5 * http://interface.eyecon.ro |
|
6 * |
|
7 * Copyright (c) 2006 Stefan Petre |
|
8 * Dual licensed under the MIT (MIT-LICENSE.txt) |
|
9 * and GPL (GPL-LICENSE.txt) licenses. |
|
10 * |
|
11 * |
|
12 */ |
|
13 |
|
14 /** |
|
15 * Slides the element |
|
16 */ |
|
17 jQuery.fn.extend( |
|
18 { |
|
19 /** |
|
20 * @name SlideInUp |
|
21 * @description slides the element in up |
|
22 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
23 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
24 * @param String easing (optional) The name of the easing effect that you want to use. |
|
25 * @type jQuery |
|
26 * @cat Plugins/Interface |
|
27 * @author Stefan Petre |
|
28 */ |
|
29 SlideInUp : function (speed,callback, easing) |
|
30 { |
|
31 return this.queue('interfaceFX', function(){ |
|
32 new jQuery.fx.slide(this, speed, callback, 'up', 'in', easing); |
|
33 }); |
|
34 }, |
|
35 |
|
36 /** |
|
37 * @name SlideOutUp |
|
38 * @description slides the element out up |
|
39 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
40 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
41 * @param String easing (optional) The name of the easing effect that you want to use. |
|
42 * @type jQuery |
|
43 * @cat Plugins/Interface |
|
44 * @author Stefan Petre |
|
45 */ |
|
46 SlideOutUp : function (speed,callback, easing) |
|
47 { |
|
48 return this.queue('interfaceFX', function(){ |
|
49 new jQuery.fx.slide(this, speed, callback, 'up', 'out', easing); |
|
50 }); |
|
51 }, |
|
52 |
|
53 /** |
|
54 * @name SlideToggleUp |
|
55 * @description slides the element in/out up |
|
56 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
57 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
58 * @param String easing (optional) The name of the easing effect that you want to use. |
|
59 * @type jQuery |
|
60 * @cat Plugins/Interface |
|
61 * @author Stefan Petre |
|
62 */ |
|
63 SlideToggleUp : function (speed,callback, easing) |
|
64 { |
|
65 return this.queue('interfaceFX', function(){ |
|
66 new jQuery.fx.slide(this, speed, callback, 'up', 'toggle', easing); |
|
67 }); |
|
68 }, |
|
69 |
|
70 /** |
|
71 * @name SlideInDown |
|
72 * @description slides the element in down |
|
73 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
74 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
75 * @param String easing (optional) The name of the easing effect that you want to use. |
|
76 * @type jQuery |
|
77 * @cat Plugins/Interface |
|
78 * @author Stefan Petre |
|
79 */ |
|
80 SlideInDown : function (speed,callback, easing) |
|
81 { |
|
82 return this.queue('interfaceFX', function(){ |
|
83 new jQuery.fx.slide(this, speed, callback, 'down', 'in', easing); |
|
84 }); |
|
85 }, |
|
86 |
|
87 /** |
|
88 * @name SlideOutDown |
|
89 * @description slides the element out down |
|
90 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
91 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
92 * @param String easing (optional) The name of the easing effect that you want to use. |
|
93 * @type jQuery |
|
94 * @cat Plugins/Interface |
|
95 * @author Stefan Petre |
|
96 */ |
|
97 SlideOutDown : function (speed,callback, easing) |
|
98 { |
|
99 return this.queue('interfaceFX', function(){ |
|
100 new jQuery.fx.slide(this, speed, callback, 'down', 'out', easing); |
|
101 }); |
|
102 }, |
|
103 |
|
104 /** |
|
105 * @name SlideToggleDown |
|
106 * @description slides the element in/out down |
|
107 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
108 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
109 * @param String easing (optional) The name of the easing effect that you want to use. |
|
110 * @type jQuery |
|
111 * @cat Plugins/Interface |
|
112 * @author Stefan Petre |
|
113 */ |
|
114 SlideToggleDown : function (speed,callback, easing) |
|
115 { |
|
116 return this.queue('interfaceFX', function(){ |
|
117 new jQuery.fx.slide(this, speed, callback, 'down', 'toggle', easing); |
|
118 }); |
|
119 }, |
|
120 |
|
121 /** |
|
122 * @name SlideInLeft |
|
123 * @description slides the element in left |
|
124 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
125 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
126 * @param String easing (optional) The name of the easing effect that you want to use. |
|
127 * @type jQuery |
|
128 * @cat Plugins/Interface |
|
129 * @author Stefan Petre |
|
130 */ |
|
131 SlideInLeft : function (speed,callback, easing) |
|
132 { |
|
133 return this.queue('interfaceFX', function(){ |
|
134 new jQuery.fx.slide(this, speed, callback, 'left', 'in', easing); |
|
135 }); |
|
136 }, |
|
137 |
|
138 /** |
|
139 * @name SlideOutLeft |
|
140 * @description slides the element out left |
|
141 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
142 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
143 * @param String easing (optional) The name of the easing effect that you want to use. |
|
144 * @type jQuery |
|
145 * @cat Plugins/Interface |
|
146 * @author Stefan Petre |
|
147 */ |
|
148 SlideOutLeft : function (speed,callback, easing) |
|
149 { |
|
150 return this.queue('interfaceFX', function(){ |
|
151 new jQuery.fx.slide(this, speed, callback, 'left', 'out', easing); |
|
152 }); |
|
153 }, |
|
154 |
|
155 /** |
|
156 * @name SlideToggleLeft |
|
157 * @description slides the element in/out left |
|
158 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
159 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
160 * @param String easing (optional) The name of the easing effect that you want to use. |
|
161 * @type jQuery |
|
162 * @cat Plugins/Interface |
|
163 * @author Stefan Petre |
|
164 */ |
|
165 SlideToggleLeft : function (speed,callback, easing) |
|
166 { |
|
167 return this.queue('interfaceFX', function(){ |
|
168 new jQuery.fx.slide(this, speed, callback, 'left', 'toggle', easing); |
|
169 }); |
|
170 }, |
|
171 |
|
172 /** |
|
173 * @name SlideInRight |
|
174 * @description slides the element in right |
|
175 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
176 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
177 * @param String easing (optional) The name of the easing effect that you want to use. |
|
178 * @type jQuery |
|
179 * @cat Plugins/Interface |
|
180 * @author Stefan Petre |
|
181 */ |
|
182 SlideInRight : function (speed,callback, easing) |
|
183 { |
|
184 return this.queue('interfaceFX', function(){ |
|
185 new jQuery.fx.slide(this, speed, callback, 'right', 'in', easing); |
|
186 }); |
|
187 }, |
|
188 |
|
189 /** |
|
190 * @name SlideOutRight |
|
191 * @description slides the element out right |
|
192 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
193 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
194 * @param String easing (optional) The name of the easing effect that you want to use. |
|
195 * @type jQuery |
|
196 * @cat Plugins/Interface |
|
197 * @author Stefan Petre |
|
198 */ |
|
199 SlideOutRight : function (speed,callback, easing) |
|
200 { |
|
201 return this.queue('interfaceFX', function(){ |
|
202 new jQuery.fx.slide(this, speed, callback, 'right', 'out', easing); |
|
203 }); |
|
204 }, |
|
205 |
|
206 /** |
|
207 * @name SlideToggleRight |
|
208 * @description slides the element in/out right |
|
209 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast'] |
|
210 * @param Function callback (optional) A function to be executed whenever the animation completes. |
|
211 * @param String easing (optional) The name of the easing effect that you want to use. |
|
212 * @type jQuery |
|
213 * @cat Plugins/Interface |
|
214 * @author Stefan Petre |
|
215 */ |
|
216 SlideToggleRight : function (speed,callback, easing) |
|
217 { |
|
218 return this.queue('interfaceFX', function(){ |
|
219 new jQuery.fx.slide(this, speed, callback, 'right', 'toggle', easing); |
|
220 }); |
|
221 } |
|
222 } |
|
223 ); |
|
224 |
|
225 jQuery.fx.slide = function(e, speed, callback, direction, type, easing) |
|
226 { |
|
227 if (!jQuery.fxCheckTag(e)) { |
|
228 jQuery.dequeue(e, 'interfaceFX'); |
|
229 return false; |
|
230 } |
|
231 var z = this; |
|
232 z.el = jQuery(e); |
|
233 z.easing = typeof callback == 'string' ? callback : easing||null; |
|
234 z.callback = typeof callback == 'function' ? callback : null; |
|
235 if ( type == 'toggle') { |
|
236 type = z.el.css('display') == 'none' ? 'in' : 'out'; |
|
237 } |
|
238 if (!e.ifxFirstDisplay) |
|
239 e.ifxFirstDisplay = z.el.css('display'); |
|
240 z.el.show(); |
|
241 |
|
242 z.speed = speed; |
|
243 z.fx = jQuery.fx.buildWrapper(e); |
|
244 |
|
245 z.type = type; |
|
246 z.direction = direction; |
|
247 z.complete = function() |
|
248 { |
|
249 if(z.type == 'out') |
|
250 z.el.css('visibility', 'hidden'); |
|
251 jQuery.fx.destroyWrapper(z.fx.wrapper.get(0), z.fx.oldStyle); |
|
252 if(z.type == 'in'){ |
|
253 z.el.css('display', z.el.get(0).ifxFirstDisplay == 'none' ? 'block' : z.el.get(0).ifxFirstDisplay); |
|
254 } else { |
|
255 z.el.css('display', 'none'); |
|
256 z.el.css('visibility', 'visible'); |
|
257 } |
|
258 if (z.callback && z.callback.constructor == Function) { |
|
259 z.callback.apply(z.el.get(0)); |
|
260 } |
|
261 jQuery.dequeue(z.el.get(0), 'interfaceFX'); |
|
262 }; |
|
263 switch (z.direction) { |
|
264 case 'up': |
|
265 z.ef = new jQuery.fx( |
|
266 z.el.get(0), |
|
267 jQuery.speed( |
|
268 z.speed, |
|
269 z.easing, |
|
270 z.complete |
|
271 ), |
|
272 'top' |
|
273 ); |
|
274 z.efx = new jQuery.fx( |
|
275 z.fx.wrapper.get(0), |
|
276 jQuery.speed( |
|
277 z.speed, |
|
278 z.easing |
|
279 ), |
|
280 'height' |
|
281 ); |
|
282 if (z.type == 'in') { |
|
283 z.ef.custom (-z.fx.oldStyle.sizes.hb, 0); |
|
284 z.efx.custom(0, z.fx.oldStyle.sizes.hb); |
|
285 } else { |
|
286 z.ef.custom (0, -z.fx.oldStyle.sizes.hb); |
|
287 z.efx.custom (z.fx.oldStyle.sizes.hb, 0); |
|
288 } |
|
289 break; |
|
290 case 'down': |
|
291 z.ef = new jQuery.fx( |
|
292 z.el.get(0), |
|
293 jQuery.speed( |
|
294 z.speed, |
|
295 z.easing, |
|
296 z.complete |
|
297 ), |
|
298 'top' |
|
299 ); |
|
300 if (z.type == 'in') { |
|
301 z.ef.custom (z.fx.oldStyle.sizes.hb, 0); |
|
302 } else { |
|
303 z.ef.custom (0, z.fx.oldStyle.sizes.hb); |
|
304 } |
|
305 break; |
|
306 case 'left': |
|
307 z.ef = new jQuery.fx( |
|
308 z.el.get(0), |
|
309 jQuery.speed( |
|
310 z.speed, |
|
311 z.easing, |
|
312 z.complete |
|
313 ), |
|
314 'left' |
|
315 ); |
|
316 z.efx = new jQuery.fx( |
|
317 z.fx.wrapper.get(0), |
|
318 jQuery.speed( |
|
319 z.speed, |
|
320 z.easing |
|
321 ), |
|
322 'width' |
|
323 ); |
|
324 if (z.type == 'in') { |
|
325 z.ef.custom (-z.fx.oldStyle.sizes.wb, 0); |
|
326 z.efx.custom (0, z.fx.oldStyle.sizes.wb); |
|
327 } else { |
|
328 z.ef.custom (0, -z.fx.oldStyle.sizes.wb); |
|
329 z.efx.custom (z.fx.oldStyle.sizes.wb, 0); |
|
330 } |
|
331 break; |
|
332 case 'right': |
|
333 z.ef = new jQuery.fx( |
|
334 z.el.get(0), |
|
335 jQuery.speed( |
|
336 z.speed, |
|
337 z.easing, |
|
338 z.complete |
|
339 ), |
|
340 'left' |
|
341 ); |
|
342 if (z.type == 'in') { |
|
343 z.ef.custom (z.fx.oldStyle.sizes.wb, 0); |
|
344 } else { |
|
345 z.ef.custom (0, z.fx.oldStyle.sizes.wb); |
|
346 } |
|
347 break; |
|
348 } |
|
349 }; |