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;