2 * jQuery UI Effects 1.8.24
4 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT or GPL Version 2 licenses.
6 * http://jquery.org/license
8 * http://docs.jquery.com/UI/Effects/
10 ;jQuery
.effects
|| (function($, undefined) {
16 /******************************************************************************/
17 /****************************** COLOR ANIMATIONS ******************************/
18 /******************************************************************************/
20 // override the animation for color styles
21 $.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor',
22 'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'],
24 $.fx
.step
[attr
] = function(fx
) {
26 fx
.start
= getColor(fx
.elem
, attr
);
27 fx
.end
= getRGB(fx
.end
);
31 fx
.elem
.style
[attr
] = 'rgb(' +
32 Math
.max(Math
.min(parseInt((fx
.pos
* (fx
.end
[0] - fx
.start
[0])) + fx
.start
[0], 10), 255), 0) + ',' +
33 Math
.max(Math
.min(parseInt((fx
.pos
* (fx
.end
[1] - fx
.start
[1])) + fx
.start
[1], 10), 255), 0) + ',' +
34 Math
.max(Math
.min(parseInt((fx
.pos
* (fx
.end
[2] - fx
.start
[2])) + fx
.start
[2], 10), 255), 0) + ')';
38 // Color Conversion functions from highlightFade
39 // By Blair Mitchelmore
40 // http://jquery.offput.ca/highlightFade/
42 // Parse strings looking for color tuples [255,255,255]
43 function getRGB(color
) {
46 // Check if we're already dealing with an array of colors
47 if ( color
&& color
.constructor == Array
&& color
.length
== 3 )
50 // Look for rgb(num,num,num)
51 if (result
= /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color
))
52 return [parseInt(result
[1],10), parseInt(result
[2],10), parseInt(result
[3],10)];
54 // Look for rgb(num%,num%,num%)
55 if (result
= /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color
))
56 return [parseFloat(result
[1])*2.55, parseFloat(result
[2])*2.55, parseFloat(result
[3])*2.55];
59 if (result
= /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color
))
60 return [parseInt(result
[1],16), parseInt(result
[2],16), parseInt(result
[3],16)];
63 if (result
= /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color
))
64 return [parseInt(result
[1]+result
[1],16), parseInt(result
[2]+result
[2],16), parseInt(result
[3]+result
[3],16)];
66 // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
67 if (result
= /rgba\(0, 0, 0, 0\)/.exec(color
))
68 return colors
['transparent'];
70 // Otherwise, we're most likely dealing with a named color
71 return colors
[$.trim(color
).toLowerCase()];
74 function getColor(elem
, attr
) {
78 // jQuery <1.4.3 uses curCSS, in 1.4.3 - 1.7.2 curCSS = css, 1.8+ only has css
79 color
= ($.curCSS
|| $.css
)(elem
, attr
);
81 // Keep going until we find an element that has color, or we hit the body
82 if ( color
!= '' && color
!= 'transparent' || $.nodeName(elem
, "body") )
85 attr
= "backgroundColor";
86 } while ( elem
= elem
.parentNode
);
91 // Some named colors to work with
92 // From Interface by Stefan Petre
93 // http://interface.eyecon.ro/
104 darkcyan
:[0,139,139],
105 darkgrey
:[169,169,169],
107 darkkhaki
:[189,183,107],
108 darkmagenta
:[139,0,139],
109 darkolivegreen
:[85,107,47],
110 darkorange
:[255,140,0],
111 darkorchid
:[153,50,204],
113 darksalmon
:[233,150,122],
114 darkviolet
:[148,0,211],
120 lightblue
:[173,216,230],
121 lightcyan
:[224,255,255],
122 lightgreen
:[144,238,144],
123 lightgrey
:[211,211,211],
124 lightpink
:[255,182,193],
125 lightyellow
:[255,255,224],
136 silver
:[192,192,192],
139 transparent
: [255,255,255]
144 /******************************************************************************/
145 /****************************** CLASS ANIMATIONS ******************************/
146 /******************************************************************************/
148 var classAnimationActions
= ['add', 'remove', 'toggle'],
161 function getElementStyles() {
162 var style
= document
.defaultView
163 ? document
.defaultView
.getComputedStyle(this, null)
169 // webkit enumerates style porperties
170 if (style
&& style
.length
&& style
[0] && style
[style
[0]]) {
171 var len
= style
.length
;
174 if (typeof style
[key
] == 'string') {
175 camelCase
= key
.replace(/\-(\w)/g, function(all
, letter
){
176 return letter
.toUpperCase();
178 newStyle
[camelCase
] = style
[key
];
183 if (typeof style
[key
] === 'string') {
184 newStyle
[key
] = style
[key
];
192 function filterStyles(styles
) {
194 for (name
in styles
) {
195 value
= styles
[name
];
197 // ignore null and undefined values
199 // ignore functions (when does this occur?)
200 $.isFunction(value
) ||
201 // shorthand styles that need to be expanded
202 name
in shorthandStyles
||
203 // ignore scrollbars (break in IE)
204 (/scrollbar/).test(name
) ||
206 // only colors or values that can be converted to numbers
207 (!(/color/i).test(name
) && isNaN(parseFloat(value
)))
216 function styleDifference(oldStyle
, newStyle
) {
217 var diff
= { _
: 0 }, // http://dev.jquery.com/ticket/5459
220 for (name
in newStyle
) {
221 if (oldStyle
[name
] != newStyle
[name
]) {
222 diff
[name
] = newStyle
[name
];
229 $.effects
.animateClass = function(value
, duration
, easing
, callback
) {
230 if ($.isFunction(easing
)) {
235 return this.queue(function() {
237 originalStyleAttr
= that
.attr('style') || ' ',
238 originalStyle
= filterStyles(getElementStyles
.call(this)),
240 className
= that
.attr('class') || "";
242 $.each(classAnimationActions
, function(i
, action
) {
244 that
[action
+ 'Class'](value
[action
]);
247 newStyle
= filterStyles(getElementStyles
.call(this));
248 that
.attr('class', className
);
250 that
.animate(styleDifference(originalStyle
, newStyle
), {
254 complete: function() {
255 $.each(classAnimationActions
, function(i
, action
) {
256 if (value
[action
]) { that
[action
+ 'Class'](value
[action
]); }
258 // work around bug in IE by clearing the cssText before setting it
259 if (typeof that
.attr('style') == 'object') {
260 that
.attr('style').cssText
= '';
261 that
.attr('style').cssText
= originalStyleAttr
;
263 that
.attr('style', originalStyleAttr
);
265 if (callback
) { callback
.apply(this, arguments
); }
273 _addClass
: $.fn
.addClass
,
274 addClass: function(classNames
, speed
, easing
, callback
) {
275 return speed
? $.effects
.animateClass
.apply(this, [{ add
: classNames
},speed
,easing
,callback
]) : this._addClass(classNames
);
278 _removeClass
: $.fn
.removeClass
,
279 removeClass: function(classNames
,speed
,easing
,callback
) {
280 return speed
? $.effects
.animateClass
.apply(this, [{ remove
: classNames
},speed
,easing
,callback
]) : this._removeClass(classNames
);
283 _toggleClass
: $.fn
.toggleClass
,
284 toggleClass: function(classNames
, force
, speed
, easing
, callback
) {
285 if ( typeof force
== "boolean" || force
=== undefined ) {
287 // without speed parameter;
288 return this._toggleClass(classNames
, force
);
290 return $.effects
.animateClass
.apply(this, [(force
?{add
:classNames
}:{remove
:classNames
}),speed
,easing
,callback
]);
293 // without switch parameter;
294 return $.effects
.animateClass
.apply(this, [{ toggle
: classNames
},force
,speed
,easing
]);
298 switchClass: function(remove
,add
,speed
,easing
,callback
) {
299 return $.effects
.animateClass
.apply(this, [{ add
: add
, remove
: remove
},speed
,easing
,callback
]);
305 /******************************************************************************/
306 /*********************************** EFFECTS **********************************/
307 /******************************************************************************/
309 $.extend($.effects
, {
312 // Saves a set of properties in a data storage
313 save: function(element
, set) {
314 for(var i
=0; i
< set.length
; i
++) {
315 if(set[i
] !== null) element
.data("ec.storage."+set[i
], element
[0].style
[set[i
]]);
319 // Restores a set of previously saved properties from a data storage
320 restore: function(element
, set) {
321 for(var i
=0; i
< set.length
; i
++) {
322 if(set[i
] !== null) element
.css(set[i
], element
.data("ec.storage."+set[i
]));
326 setMode: function(el
, mode
) {
327 if (mode
== 'toggle') mode
= el
.is(':hidden') ? 'show' : 'hide'; // Set for toggle
331 getBaseline: function(origin
, original
) { // Translates a [top,left] array into a baseline value
332 // this should be a little more flexible in the future to handle a string & hash
335 case 'top': y
= 0; break;
336 case 'middle': y
= 0.5; break;
337 case 'bottom': y
= 1; break;
338 default: y
= origin
[0] / original
.height
;
341 case 'left': x
= 0; break;
342 case 'center': x
= 0.5; break;
343 case 'right': x
= 1; break;
344 default: x
= origin
[1] / original
.width
;
349 // Wraps the element around a wrapper that copies position properties
350 createWrapper: function(element
) {
352 // if the element is already wrapped, return it
353 if (element
.parent().is('.ui-effects-wrapper')) {
354 return element
.parent();
359 width
: element
.outerWidth(true),
360 height
: element
.outerHeight(true),
361 'float': element
.css('float')
363 wrapper
= $('<div></div>')
364 .addClass('ui-effects-wrapper')
367 background
: 'transparent',
372 active
= document
.activeElement
;
375 // Firefox incorrectly exposes anonymous content
376 // https://bugzilla.mozilla.org/show_bug.cgi?id=561664
380 active
= document
.body
;
383 element
.wrap( wrapper
);
385 // Fixes #7595 - Elements lose focus when wrapped.
386 if ( element
[ 0 ] === active
|| $.contains( element
[ 0 ], active
) ) {
390 wrapper
= element
.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element
392 // transfer positioning properties to the wrapper
393 if (element
.css('position') == 'static') {
394 wrapper
.css({ position
: 'relative' });
395 element
.css({ position
: 'relative' });
398 position
: element
.css('position'),
399 zIndex
: element
.css('z-index')
401 $.each(['top', 'left', 'bottom', 'right'], function(i
, pos
) {
402 props
[pos
] = element
.css(pos
);
403 if (isNaN(parseInt(props
[pos
], 10))) {
407 element
.css({position
: 'relative', top
: 0, left
: 0, right
: 'auto', bottom
: 'auto' });
410 return wrapper
.css(props
).show();
413 removeWrapper: function(element
) {
415 active
= document
.activeElement
;
417 if (element
.parent().is('.ui-effects-wrapper')) {
418 parent
= element
.parent().replaceWith(element
);
419 // Fixes #7595 - Elements lose focus when wrapped.
420 if ( element
[ 0 ] === active
|| $.contains( element
[ 0 ], active
) ) {
429 setTransition: function(element
, list
, factor
, value
) {
431 $.each(list
, function(i
, x
){
432 var unit
= element
.cssUnit(x
);
433 if (unit
[0] > 0) value
[x
] = unit
[0] * factor
+ unit
[1];
440 function _normalizeArguments(effect
, options
, speed
, callback
) {
441 // shift params for method overloading
442 if (typeof effect
== 'object') {
446 effect
= options
.effect
;
448 if ($.isFunction(options
)) {
453 if (typeof options
== 'number' || $.fx
.speeds
[options
]) {
458 if ($.isFunction(speed
)) {
463 options
= options
|| {};
465 speed
= speed
|| options
.duration
;
466 speed
= $.fx
.off
? 0 : typeof speed
== 'number'
467 ? speed
: speed
in $.fx
.speeds
? $.fx
.speeds
[speed
] : $.fx
.speeds
._default
;
469 callback
= callback
|| options
.complete
;
471 return [effect
, options
, speed
, callback
];
474 function standardSpeed( speed
) {
475 // valid standard speeds
476 if ( !speed
|| typeof speed
=== "number" || $.fx
.speeds
[ speed
] ) {
480 // invalid strings - treat as "normal" speed
481 if ( typeof speed
=== "string" && !$.effects
[ speed
] ) {
489 effect: function(effect
, options
, speed
, callback
) {
490 var args
= _normalizeArguments
.apply(this, arguments
),
491 // TODO: make effects take actual parameters instead of a hash
497 mode
= args2
.options
.mode
,
498 effectMethod
= $.effects
[effect
];
500 if ( $.fx
.off
|| !effectMethod
) {
501 // delegate to the original method (e.g., .show()) if possible
503 return this[ mode
]( args2
.duration
, args2
.callback
);
505 return this.each(function() {
506 if ( args2
.callback
) {
507 args2
.callback
.call( this );
513 return effectMethod
.call(this, args2
);
517 show: function(speed
) {
518 if ( standardSpeed( speed
) ) {
519 return this._show
.apply(this, arguments
);
521 var args
= _normalizeArguments
.apply(this, arguments
);
522 args
[1].mode
= 'show';
523 return this.effect
.apply(this, args
);
528 hide: function(speed
) {
529 if ( standardSpeed( speed
) ) {
530 return this._hide
.apply(this, arguments
);
532 var args
= _normalizeArguments
.apply(this, arguments
);
533 args
[1].mode
= 'hide';
534 return this.effect
.apply(this, args
);
538 // jQuery core overloads toggle and creates _toggle
539 __toggle
: $.fn
.toggle
,
540 toggle: function(speed
) {
541 if ( standardSpeed( speed
) || typeof speed
=== "boolean" || $.isFunction( speed
) ) {
542 return this.__toggle
.apply(this, arguments
);
544 var args
= _normalizeArguments
.apply(this, arguments
);
545 args
[1].mode
= 'toggle';
546 return this.effect
.apply(this, args
);
551 cssUnit: function(key
) {
552 var style
= this.css(key
), val
= [];
553 $.each( ['em','px','%','pt'], function(i
, unit
){
554 if(style
.indexOf(unit
) > 0)
555 val
= [parseFloat(style
), unit
];
563 /******************************************************************************/
564 /*********************************** EASING ***********************************/
565 /******************************************************************************/
567 // based on easing equations from Robert Penner (http://www.robertpenner.com/easing)
569 var baseEasings
= {};
571 $.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i
, name
) {
572 baseEasings
[ name
] = function( p
) {
573 return Math
.pow( p
, i
+ 2 );
577 $.extend( baseEasings
, {
578 Sine: function ( p
) {
579 return 1 - Math
.cos( p
* Math
.PI
/ 2 );
581 Circ: function ( p
) {
582 return 1 - Math
.sqrt( 1 - p
* p
);
584 Elastic: function( p
) {
585 return p
=== 0 || p
=== 1 ? p
:
586 -Math
.pow( 2, 8 * (p
- 1) ) * Math
.sin( ( (p
- 1) * 80 - 7.5 ) * Math
.PI
/ 15 );
588 Back: function( p
) {
589 return p
* p
* ( 3 * p
- 2 );
591 Bounce: function ( p
) {
595 while ( p
< ( ( pow2
= Math
.pow( 2, --bounce
) ) - 1 ) / 11 ) {}
596 return 1 / Math
.pow( 4, 3 - bounce
) - 7.5625 * Math
.pow( ( pow2
* 3 - 2 ) / 22 - p
, 2 );
600 $.each( baseEasings
, function( name
, easeIn
) {
601 $.easing
[ "easeIn" + name
] = easeIn
;
602 $.easing
[ "easeOut" + name
] = function( p
) {
603 return 1 - easeIn( 1 - p
);
605 $.easing
[ "easeInOut" + name
] = function( p
) {
607 easeIn( p
* 2 ) / 2 :
608 easeIn( p
* -2 + 2 ) / -2 + 1;