2 * Interface Elements for jQuery
\r
3 * FX - scale/grow/shrink/puff
\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
14 * Applies a scallign animation to element
\r
20 * @description scales the element from 0 to intitial size
\r
21 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
22 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
23 * @param String easing (optional) The name of the easing effect that you want to use.
\r
25 * @cat Plugins/Interface
\r
26 * @author Stefan Petre
\r
28 Grow : function(speed, callback, easing) {
\r
29 return this.queue('interfaceFX',function(){
\r
30 new jQuery.fx.Scale(this, speed, 1, 100, true, callback, 'grow', easing);
\r
36 * @description scales the element from intitial size to 0
\r
37 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
38 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
39 * @param String easing (optional) The name of the easing effect that you want to use.
\r
41 * @cat Plugins/Interface
\r
42 * @author Stefan Petre
\r
44 Shrink : function(speed, callback, easing) {
\r
45 return this.queue('interfaceFX',function(){
\r
46 new jQuery.fx.Scale(this, speed, 100, 1, true, callback, 'shrink', easing);
\r
52 * @description makes element to dispear by scalling to 150% and fading it out
\r
53 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
54 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
55 * @param String easing (optional) The name of the easing effect that you want to use.
\r
57 * @cat Plugins/Interface
\r
58 * @author Stefan Petre
\r
60 Puff : function(speed, callback, easing) {
\r
61 return this.queue('interfaceFX',function(){
\r
62 var easing = easing || 'easeout';
\r
63 new jQuery.fx.Scale(this, speed, 100, 150, true, callback, 'puff', easing);
\r
69 * @description scales the element
\r
70 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']
\r
71 * @param Integer from initial scalling procentage
\r
72 * @param Integer to final scalling procentage
\r
73 * @param Boolean reastore whatever to restore the initital scalling procentage when animation ends
\r
74 * @param Function callback (optional) A function to be executed whenever the animation completes.
\r
75 * @param String easing (optional) The name of the easing effect that you want to use.
\r
77 * @cat Plugins/Interface
\r
78 * @author Stefan Petre
\r
80 Scale : function(speed, from, to, restore, callback, easing) {
\r
81 return this.queue('interfaceFX',function(){
\r
82 new jQuery.fx.Scale(this, speed, from, to, restore, callback, 'Scale', easing);
\r
88 jQuery.fx.Scale = function (e, speed, from, to, restore, callback, type, easing)
\r
90 if (!jQuery.fxCheckTag(e)) {
\r
91 jQuery.dequeue(e, 'interfaceFX');
\r
96 z.from = parseInt(from) || 100;
\r
97 z.to = parseInt(to) || 100;
\r
98 z.easing = typeof callback == 'string' ? callback : easing||null;
\r
99 z.callback = typeof callback == 'function' ? callback : null;
\r
100 z.duration = jQuery.speed(speed).duration;
\r
101 z.restore = restore|| null;
\r
102 z.oldP = jQuery.iUtil.getSize(e);
\r
104 width: z.el.css('width'),
\r
105 height: z.el.css('height'),
\r
106 fontSize: z.el.css('fontSize')||'100%',
\r
107 position : z.el.css('position'),
\r
108 display : z.el.css('display'),
\r
109 top : z.el.css('top'),
\r
110 left : z.el.css('left'),
\r
111 overflow : z.el.css('overflow'),
\r
112 borderTopWidth : z.el.css('borderTopWidth'),
\r
113 borderRightWidth : z.el.css('borderRightWidth'),
\r
114 borderBottomWidth : z.el.css('borderBottomWidth'),
\r
115 borderLeftWidth : z.el.css('borderLeftWidth'),
\r
116 paddingTop : z.el.css('paddingTop'),
\r
117 paddingRight : z.el.css('paddingRight'),
\r
118 paddingBottom : z.el.css('paddingBottom'),
\r
119 paddingLeft : z.el.css('paddingLeft')
\r
121 z.width = parseInt(z.oldStyle.width)||e.offsetWidth||0;
\r
122 z.height = parseInt(z.oldStyle.height)||e.offsetHeight||0;
\r
123 z.top = parseInt(z.oldStyle.top)||0;
\r
124 z.left = parseInt(z.oldStyle.left)||0;
\r
125 sizes = ['em','px','pt','%'];
\r
127 if (z.oldStyle.fontSize.indexOf(sizes[i])>0) {
\r
128 z.fontUnit = sizes[i];
\r
129 z.fontSize = parseFloat(z.oldStyle.fontSize);
\r
131 if (z.oldStyle.borderTopWidth.indexOf(sizes[i])>0) {
\r
132 z.borderTopUnit = sizes[i];
\r
133 z.borderTopSize = parseFloat(z.oldStyle.borderTopWidth)||0;
\r
135 if (z.oldStyle.borderRightWidth.indexOf(sizes[i])>0) {
\r
136 z.borderRightUnit = sizes[i];
\r
137 z.borderRightSize = parseFloat(z.oldStyle.borderRightWidth)||0;
\r
139 if (z.oldStyle.borderBottomWidth.indexOf(sizes[i])>0) {
\r
140 z.borderBottomUnit = sizes[i];
\r
141 z.borderBottomSize = parseFloat(z.oldStyle.borderBottomWidth)||0;
\r
143 if (z.oldStyle.borderLeftWidth.indexOf(sizes[i])>0) {
\r
144 z.borderLeftUnit = sizes[i];
\r
145 z.borderLeftSize = parseFloat(z.oldStyle.borderLeftWidth)||0;
\r
147 if (z.oldStyle.paddingTop.indexOf(sizes[i])>0) {
\r
148 z.paddingTopUnit = sizes[i];
\r
149 z.paddingTopSize = parseFloat(z.oldStyle.paddingTop)||0;
\r
151 if (z.oldStyle.paddingRight.indexOf(sizes[i])>0) {
\r
152 z.paddingRightUnit = sizes[i];
\r
153 z.paddingRightSize = parseFloat(z.oldStyle.paddingRight)||0;
\r
155 if (z.oldStyle.paddingBottom.indexOf(sizes[i])>0) {
\r
156 z.paddingBottomUnit = sizes[i];
\r
157 z.paddingBottomSize = parseFloat(z.oldStyle.paddingBottom)||0;
\r
159 if (z.oldStyle.paddingLeft.indexOf(sizes[i])>0) {
\r
160 z.paddingLeftUnit = sizes[i];
\r
161 z.paddingLeftSize = parseFloat(z.oldStyle.paddingLeft)||0;
\r
166 if (z.oldStyle.position != 'relative' && z.oldStyle.position != 'absolute') {
\r
167 z.el.css('position', 'relative');
\r
169 z.el.css('overflow', 'hidden');
\r
174 z.startTop = z.top + z.oldP.h/2;
\r
176 z.startLeft = z.left + z.oldP.w/2;
\r
177 z.endLeft = z.left;
\r
180 z.endTop = z.top + z.oldP.h/2;
\r
181 z.startTop = z.top;
\r
182 z.endLeft = z.left + z.oldP.w/2;
\r
183 z.startLeft = z.left;
\r
186 z.endTop = z.top - z.oldP.h/4;
\r
187 z.startTop = z.top;
\r
188 z.endLeft = z.left - z.oldP.w/4;
\r
189 z.startLeft = z.left;
\r
192 z.firstStep = false;
\r
193 z.t=(new Date).getTime();
\r
194 z.clear = function(){clearInterval(z.timer);z.timer=null;};
\r
195 z.step = function(){
\r
196 if (z.firstStep == false) {
\r
198 z.firstStep = true;
\r
200 var t = (new Date).getTime();
\r
202 var p = n / z.duration;
\r
203 if (t >= z.duration+z.t) {
\r
210 if (z.type == 'puff')
\r
213 z.zoom(z.to, l, t, true, o);
\r
220 if (!jQuery.easing || !jQuery.easing[z.easing]) {
\r
221 s = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.to-z.from) + z.from;
\r
223 s = jQuery.easing[z.easing](p, n, z.from, (z.to-z.from), z.duration);
\r
226 if (!jQuery.easing || !jQuery.easing[z.easing]) {
\r
227 t = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.endTop-z.startTop) + z.startTop;
\r
228 l = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.endLeft-z.startLeft) + z.startLeft;
\r
229 if (z.type == 'puff')
\r
230 o = ((-Math.cos(p*Math.PI)/2) + 0.5) * (-0.9999) + 0.9999;
\r
232 t = jQuery.easing[z.easing](p, n, z.startTop, (z.endTop-z.startTop), z.duration);
\r
233 l = jQuery.easing[z.easing](p, n, z.startLeft, (z.endLeft-z.startLeft), z.duration);
\r
234 if (z.type == 'puff')
\r
235 o = jQuery.easing[z.easing](p, n, 0.9999, -0.9999, z.duration);
\r
238 z.zoom(s, l, t, false, o);
\r
241 z.timer=setInterval(function(){z.step();},13);
\r
242 z.zoom = function(percent, left, top, finish, opacity)
\r
245 .css('height', z.height * percent/100 + 'px')
\r
246 .css('width', z.width * percent/100 + 'px')
\r
247 .css('left', left + 'px')
\r
248 .css('top', top + 'px')
\r
249 .css('fontSize', z.fontSize * percent /100 + z.fontUnit);
\r
250 if (z.borderTopSize)
\r
251 z.el.css('borderTopWidth', z.borderTopSize * percent /100 + z.borderTopUnit);
\r
252 if (z.borderRightSize)
\r
253 z.el.css('borderRightWidth', z.borderRightSize * percent /100 + z.borderRightUnit);
\r
254 if (z.borderBottomSize)
\r
255 z.el.css('borderBottomWidth', z.borderBottomSize * percent /100 + z.borderBottomUnit);
\r
256 if (z.borderLeftSize)
\r
257 z.el.css('borderLeftWidth', z.borderLeftSize * percent /100 + z.borderLeftUnit);
\r
258 if (z.paddingTopSize)
\r
259 z.el.css('paddingTop', z.paddingTopSize * percent /100 + z.paddingTopUnit);
\r
260 if (z.paddingRightSize)
\r
261 z.el.css('paddingRight', z.paddingRightSize * percent /100 + z.paddingRightUnit);
\r
262 if (z.paddingBottomSize)
\r
263 z.el.css('paddingBottom', z.paddingBottomSize * percent /100 + z.paddingBottomUnit);
\r
264 if (z.paddingLeftSize)
\r
265 z.el.css('paddingLeft', z.paddingLeftSize * percent /100 + z.paddingLeftUnit);
\r
266 if (z.type == 'puff') {
\r
267 if (window.ActiveXObject)
\r
268 z.el.get(0).style.filter = "alpha(opacity=" + opacity*100 + ")";
\r
269 z.el.get(0).style.opacity = opacity;
\r
273 z.el.css(z.oldStyle);
\r
275 if (z.type == 'shrink' || z.type == 'puff'){
\r
276 z.el.css('display', 'none');
\r
277 if (z.type == 'puff') {
\r
278 if (window.ActiveXObject)
\r
279 z.el.get(0).style.filter = "alpha(opacity=" + 100 + ")";
\r
280 z.el.get(0).style.opacity = 1;
\r
283 z.el.css('display', 'block');
\r
285 z.callback.apply(z.el.get(0));
\r
287 jQuery.dequeue(z.el.get(0), 'interfaceFX');
\r