2 * Interface Elements for jQuery
\r
3 * FX - open/close/switch
\r
5 * http://interface.eyecon.ro
\r
7 * Copyright (c) 2006 Stefan Petre
\r
8 * Dual licensed under the MIT (MIT-LICENSE.txt)
\r
9 * and GPL (GPL-LICENSE.txt) licenses.
\r
15 * Applies an open/close animation to element
\r
20 * @name CloseVertically
\r
21 * @description closes the element vertically
\r
22 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
23 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
24 * @param String easing (optional) The name of the easing effect that you want to use.
\r
26 * @cat Plugins/Interface
\r
27 * @author Stefan Petre
\r
29 CloseVertically : function (speed, callback, easing) {
\r
30 return this.queue('interfaceFX', function(){
\r
31 new jQuery.fx.OpenClose(this, speed, callback, 'vertically', 'close', easing);
\r
36 * @name CloseHorizontally
\r
37 * @description closes the element horizontally
\r
38 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
39 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
40 * @param String easing (optional) The name of the easing effect that you want to use.
\r
42 * @cat Plugins/Interface
\r
43 * @author Stefan Petre
\r
45 CloseHorizontally : function (speed, callback, easing) {
\r
46 return this.queue('interfaceFX', function(){
\r
47 new jQuery.fx.OpenClose(this, speed, callback, 'horizontally', 'close', easing);
\r
52 * @name SwitchHorizontally
\r
53 * @description opens/closes the element horizontally
\r
54 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
55 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
56 * @param String easing (optional) The name of the easing effect that you want to use.
\r
58 * @cat Plugins/Interface
\r
59 * @author Stefan Petre
\r
61 SwitchHorizontally : function (speed, callback, easing)
\r
63 return this.queue('interfaceFX', function(){
\r
64 if (jQuery.css(this, 'display') == 'none') {
\r
65 new jQuery.fx.OpenClose(this, speed, callback, 'horizontally', 'open', easing);
\r
67 new jQuery.fx.OpenClose(this, speed, callback, 'horizontally', 'close', easing);
\r
73 * @name SwitchVertically
\r
74 * @description opens/closes the element vertically
\r
75 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
76 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
77 * @param String easing (optional) The name of the easing effect that you want to use.
\r
79 * @cat Plugins/Interface
\r
80 * @author Stefan Petre
\r
82 SwitchVertically : function (speed, callback, easing)
\r
84 return this.queue('interfaceFX', function(){
\r
85 if (jQuery.css(this, 'display') == 'none') {
\r
86 new jQuery.fx.OpenClose(this, speed, callback, 'vertically', 'open', easing);
\r
88 new jQuery.fx.OpenClose(this, speed, callback, 'vertically', 'close', easing);
\r
94 * @name OpenVertically
\r
95 * @description opens the element vertically
\r
96 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
97 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
98 * @param String easing (optional) The name of the easing effect that you want to use.
\r
100 * @cat Plugins/Interface
\r
101 * @author Stefan Petre
\r
103 OpenVertically : function (speed, callback, easing) {
\r
104 return this.queue('interfaceFX', function(){
\r
105 new jQuery.fx.OpenClose(this, speed, callback, 'vertically', 'open', easing);
\r
110 * @name OpenHorizontally
\r
111 * @description opens the element horizontally
\r
112 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
113 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
114 * @param String easing (optional) The name of the easing effect that you want to use.
\r
116 * @cat Plugins/Interface
\r
117 * @author Stefan Petre
\r
119 OpenHorizontally : function (speed, callback, easing) {
\r
120 return this.queue('interfaceFX', function(){
\r
121 new jQuery.fx.OpenClose(this, speed, callback, 'horizontally', 'open', easing);
\r
127 jQuery.fx.OpenClose = function (e, speed, callback, direction, type, easing)
\r
129 if (!jQuery.fxCheckTag(e)) {
\r
130 jQuery.dequeue(e, 'interfaceFX');
\r
134 var restoreStyle = false;
\r
136 z.easing = typeof callback == 'string' ? callback : easing||null;
\r
137 z.callback = typeof callback == 'function' ? callback : null;
\r
140 z.oldP = jQuery.iUtil.getSize(e);
\r
142 z.oldStyle.position = z.el.css('position');
\r
143 z.oldStyle.display = z.el.css('display');
\r
144 if (z.oldStyle.display == 'none') {
\r
145 oldVisibility = z.el.css('visibility');
\r
147 restoreStyle = true;
\r
149 z.oldStyle.top = z.el.css('top');
\r
150 z.oldStyle.left = z.el.css('left');
\r
151 if (restoreStyle) {
\r
153 z.el.css('visibility', oldVisibility);
\r
155 z.oldStyle.width = z.oldP.w + 'px';
\r
156 z.oldStyle.height = z.oldP.h + 'px';
\r
157 z.oldStyle.overflow = z.el.css('overflow');
\r
158 z.oldP.top = parseInt(z.oldStyle.top)||0;
\r
159 z.oldP.left = parseInt(z.oldStyle.left)||0;
\r
162 if (z.oldStyle.position != 'relative' && z.oldStyle.position != 'absolute') {
\r
163 z.el.css('position', 'relative');
\r
165 z.el.css('overflow', 'hidden')
\r
166 .css('height', type == 'open' && direction == 'vertically' ? 1 : z.oldP.h + 'px')
\r
167 .css('width', type == 'open' && direction == 'horizontally' ? 1 : z.oldP.w + 'px');
\r
169 z.complete = function()
\r
171 z.el.css(z.oldStyle);
\r
172 if (z.type == 'close')
\r
176 jQuery.dequeue(z.el.get(0), 'interfaceFX');
\r
179 switch (direction) {
\r
181 z.eh = new jQuery.fx(
\r
183 jQuery.speed(speed-15, z.easing, callback),
\r
186 z.et = new jQuery.fx(
\r
195 if (z.type == 'close') {
\r
196 z.eh.custom(z.oldP.h,0);
\r
197 z.et.custom(z.oldP.top, z.oldP.top + z.oldP.h/2);
\r
199 z.eh.custom(0, z.oldP.h);
\r
200 z.et.custom(z.oldP.top + z.oldP.h/2, z.oldP.top);
\r
203 case 'horizontally':
\r
204 z.eh = new jQuery.fx(
\r
206 jQuery.speed(speed-15, z.easing, callback),
\r
209 z.et = new jQuery.fx(
\r
218 if (z.type == 'close') {
\r
219 z.eh.custom(z.oldP.w,0);
\r
220 z.et.custom(z.oldP.left, z.oldP.left + z.oldP.w/2);
\r
222 z.eh.custom(0, z.oldP.w);
\r
223 z.et.custom(z.oldP.left + z.oldP.w/2, z.oldP.left);
\r