Fixed two bugs with togglling.
[jquery.git] / fx / fx.js
index e8474a8..1929388 100644 (file)
--- a/fx/fx.js
+++ b/fx/fx.js
-// overwrite the old show method
-jQuery.prototype._show = jQuery.prototype.show;
+jQuery.fn.extend({
 
-/**
- * The effects module overloads the show method to now allow 
- * for a speed to the show operation. What actually happens is 
- * that the height, width, and opacity to the matched elements 
- * are changed dynamically. The only three current speeds are 
- * "slow", "normal", and "fast". For example:
- *   $("p").show("slow");
- * Note: You should not run the show method on things 
- * that are already shown. This can be circumvented by doing this:
- *   $("p:hidden").show("slow");
- */
-jQuery.prototype.show = function(speed,callback){
-       return speed ? this.animate({
-               height: "show", width: "show", opacity: "show"
-       }, speed, callback) : this._show();
-};
-
-// We're overwriting the old hide method
-jQuery.prototype._hide = jQuery.prototype.hide;
-
-
-/**
- * The hide function behaves very similary to the show function, 
- * but is just the opposite.
- *   $("p:visible").hide("slow");
- */
-jQuery.prototype.hide = function(speed,callback){
-       return speed ? this.animate({
-               height: "hide",
-               width: "hide",
-               opacity: "hide"
-       }, speed, callback) : this._hide();
-};
-
-/**
- * This function increases the height and opacity for all matched 
- * elements. This is very similar to 'show', but does not change 
- * the width - creating a neat sliding effect.
- *   $("p:hidden").slideDown("slow");
- */
-jQuery.prototype.slideDown = function(speed,callback){
-       return this.animate({height: "show"}, speed, callback);
-};
-
-/**
- * Just like slideDown, only it hides all matched elements.
- *   $("p:visible").slideUp("slow");
- */
-jQuery.prototype.slideUp = function(speed,callback){
-       return this.animate({height: "hide"}, speed, callback);
-};
-
-/**
- * Adjusts the opacity of all matched elements from a hidden, 
- * to a fully visible, state.
- *   $("p:hidden").fadeIn("slow");
- */
-jQuery.prototype.fadeIn = function(speed,callback){
-       return this.animate({opacity: "show"}, speed, callback);
-};
-
-/**
- * Same as fadeIn, but transitions from a visible, to a hidden state.
- *   $("p:visible").fadeOut("slow");
- */
-jQuery.prototype.fadeOut = function(speed,callback){
-       return this.animate({opacity: "hide"}, speed, callback);
-};
-
-/**
- * ...
- */
-jQuery.prototype.fadeTo = function(speed,to,callback){
-       return this.animate({opacity: to}, speed, callback);
-};
-
-/**
- *
- */
-jQuery.prototype.animate = function(prop,speed,callback) {
-       return this.queue(function(){
-               var i = 0;
-               for ( var p in prop ) {
-                       var e = new jQuery.fx( this, jQuery.speed(speed,callback,i++), p );
-                       if ( prop[p].constructor == Number )
-                               e.custom( e.cur(), prop[p] );
-                       else
-                               e[ prop[p] ]();
+       // overwrite the old show method
+       //_show: jQuery.fn.show,
+       
+       /**
+        * Show all matched elements using a graceful animation.
+        * The height, width, and opacity of each of the matched elements 
+        * are changed dynamically according to the specified speed.
+        *
+        * @example $("p").show("slow");
+        *
+        * @name show
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        */
+        
+       /**
+        * Show all matched elements using a graceful animation and firing a callback
+        * function after completion.
+        * The height, width, and opacity of each of the matched elements 
+        * are changed dynamically according to the specified speed.
+        *
+        * @example $("p").show("slow",function(){
+        *   alert("Animation Done.");
+        * });
+        *
+        * @name show
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        * @param Function callback A function to be executed whenever the animation completes.
+        */
+       show: function(speed,callback){
+               return speed ? this.animate({
+                       height: "show", width: "show", opacity: "show"
+               }, speed, callback) : this._show();
+       },
+       
+       // Overwrite the old hide method
+       //_hide: jQuery.fn.hide,
+       
+       /**
+        * Hide all matched elements using a graceful animation.
+        * The height, width, and opacity of each of the matched elements 
+        * are changed dynamically according to the specified speed.
+        *
+        * @example $("p").hide("slow");
+        *
+        * @name hide
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        */
+        
+       /**
+        * Hide all matched elements using a graceful animation and firing a callback
+        * function after completion.
+        * The height, width, and opacity of each of the matched elements 
+        * are changed dynamically according to the specified speed.
+        *
+        * @example $("p").hide("slow",function(){
+        *   alert("Animation Done.");
+        * });
+        *
+        * @name hide
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        * @param Function callback A function to be executed whenever the animation completes.
+        */
+       hide: function(speed,callback){
+               return speed ? this.animate({
+                       height: "hide", width: "hide", opacity: "hide"
+               }, speed, callback) : this._hide();
+       },
+       
+       /**
+        * Reveal all matched elements by adjusting their height.
+        * Only the height is adjusted for this animation, causing all matched
+        * elements to be revealed in a "sliding" manner.
+        *
+        * @example $("p").slideDown("slow");
+        *
+        * @name slideDown
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        */
+        
+       /**
+        * Reveal all matched elements by adjusting their height and firing a callback
+        * function after completion.
+        * Only the height is adjusted for this animation, causing all matched
+        * elements to be revealed in a "sliding" manner.
+        *
+        * @example $("p").slideDown("slow",function(){
+        *   alert("Animation Done.");
+        * });
+        *
+        * @name slideDown
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        * @param Function callback A function to be executed whenever the animation completes.
+        */
+       slideDown: function(speed,callback){
+               return this.animate({height: "show"}, speed, callback);
+       },
+       
+       /**
+        * Hide all matched elements by adjusting their height.
+        * Only the height is adjusted for this animation, causing all matched
+        * elements to be hidden in a "sliding" manner.
+        *
+        * @example $("p").slideUp("slow");
+        *
+        * @name slideUp
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        */
+        
+       /**
+        * Hide all matched elements by adjusting their height and firing a callback
+        * function after completion.
+        * Only the height is adjusted for this animation, causing all matched
+        * elements to be hidden in a "sliding" manner.
+        *
+        * @example $("p").slideUp("slow",function(){
+        *   alert("Animation Done.");
+        * });
+        *
+        * @name slideUp
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        * @param Function callback A function to be executed whenever the animation completes.
+        */
+       slideUp: function(speed,callback){
+               return this.animate({height: "hide"}, speed, callback);
+       },
+       
+       /**
+        * Fade in all matched elements by adjusting their opacity.
+        * Only the opacity is adjusted for this animation, meaning that
+        * all of the matched elements should already have some form of height
+        * and width associated with them.
+        *
+        * @example $("p").fadeIn("slow");
+        *
+        * @name fadeIn
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        */
+        
+       /**
+        * Fade in all matched elements by adjusting their opacity and firing a 
+        * callback function after completion.
+        * Only the opacity is adjusted for this animation, meaning that
+        * all of the matched elements should already have some form of height
+        * and width associated with them.
+        *
+        * @example $("p").fadeIn("slow",function(){
+        *   alert("Animation Done.");
+        * });
+        *
+        * @name fadeIn
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        * @param Function callback A function to be executed whenever the animation completes.
+        */
+       fadeIn: function(speed,callback){
+               return this.animate({opacity: "show"}, speed, callback);
+       },
+       
+       /**
+        * Fade out all matched elements by adjusting their opacity.
+        * Only the opacity is adjusted for this animation, meaning that
+        * all of the matched elements should already have some form of height
+        * and width associated with them.
+        *
+        * @example $("p").fadeOut("slow");
+        *
+        * @name fadeOut
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        */
+        
+       /**
+        * Fade out all matched elements by adjusting their opacity and firing a 
+        * callback function after completion.
+        * Only the opacity is adjusted for this animation, meaning that
+        * all of the matched elements should already have some form of height
+        * and width associated with them.
+        *
+        * @example $("p").fadeOut("slow",function(){
+        *   alert("Animation Done.");
+        * });
+        *
+        * @name fadeOut
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        * @param Function callback A function to be executed whenever the animation completes.
+        */
+       fadeOut: function(speed,callback){
+               return this.animate({opacity: "hide"}, speed, callback);
+       },
+       
+       /**
+        * Fade the opacity of all matched elements to a specified opacity.
+        * Only the opacity is adjusted for this animation, meaning that
+        * all of the matched elements should already have some form of height
+        * and width associated with them.
+        *
+        * @example $("p").fadeTo("slow", 0.5);
+        *
+        * @name fadeTo
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        * @param Number opacity The opacity to fade to (a number from 0 to 1).
+        */
+        
+       /**
+        * Fade the opacity of all matched elements to a specified opacity and 
+        * firing a callback function after completion.
+        * Only the opacity is adjusted for this animation, meaning that
+        * all of the matched elements should already have some form of height
+        * and width associated with them.
+        *
+        * @example $("p").fadeTo("slow", 0.5, function(){
+        *   alert("Animation Done.");
+        * });
+        *
+        * @name fadeTo
+        * @type jQuery
+        * @param Object speed A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
+        * @param Number opacity The opacity to fade to (a number from 0 to 1).
+        * @param Function callback A function to be executed whenever the animation completes.
+        */
+       fadeTo: function(speed,to,callback){
+               return this.animate({opacity: to}, speed, callback);
+       },
+       
+       /**
+        * @private
+        */
+       animate: function(prop,speed,callback) {
+               return this.queue(function(){
+                       var i = 0;
+                       for ( var p in prop ) {
+                               var e = new jQuery.fx( this, jQuery.speed(speed,callback,i++), p );
+                               if ( prop[p].constructor == Number )
+                                       e.custom( e.cur(), prop[p] );
+                               else
+                                       e[ prop[p] ]( prop );
+                       }
+               });
+       },
+       
+       /**
+        *
+        * @private
+        */
+       queue: function(type,fn){
+               if ( !fn ) {
+                       fn = type;
+                       type = "fx";
                }
-       });
-};
-
-jQuery.speed = function(s,o,i) {
-       o = o || {};
        
-       if ( o.constructor == Function )
-               o = { complete: o };
+               return this.each(function(){
+                       if ( !this.queue )
+                               this.queue = {};
        
-       var ss = {"slow":600,"fast":200};
-       o.duration = (s && s.constructor == Number ? s : ss[s]) || 400;
-
-       // Queueing
-       o.oldComplete = o.complete;
-       o.complete = function(){
-               jQuery.dequeue(this, "fx");
-               if ( o.oldComplete && o.oldComplete.constructor == Function )
-                       o.oldComplete.apply( this );
-       };
-       
-       if ( i > 0 )
-               o.complete = null;
-
-       return o;
-};
-
-jQuery.queue = {};
-
-jQuery.dequeue = function(elem,type){
-       type = type || "fx";
-
-       if ( elem.queue && elem.queue[type] ) {
-               // Remove self
-               elem.queue[type].shift();
-
-               // Get next function
-               var f = elem.queue[type][0];
+                       if ( !this.queue[type] )
+                               this.queue[type] = [];
        
-               if ( f )
-                       f.apply( elem );
+                       this.queue[type].push( fn );
+               
+                       if ( this.queue[type].length == 1 )
+                               fn.apply(this);
+               });
        }
-};
 
-jQuery.prototype.queue = function(type,fn){
-       if ( !fn ) {
-               fn = type;
-               type = "fx";
-       }
-
-       return this.each(function(){
-               if ( !this.queue )
-                       this.queue = {};
-
-               if ( !this.queue[type] )
-                       this.queue[type] = [];
-
-               this.queue[type].push( fn );
-       
-               if ( this.queue[type].length == 1 )
-                       fn.apply(this);
-       });
-};
+});
 
-jQuery.setAuto = function(e,p) {
-       var a = e.style[p];
-       var o = jQuery.css(e,p);
-       e.style[p] = "auto";
-       var n = jQuery.css(e,p);
-       if ( o != n )
-               e.style[p] = a;
-};
+jQuery.extend({
 
-/*
- * I originally wrote fx() as a clone of moo.fx and in the process
- * of making it small in size the code became illegible to sane
- * people. You've been warned.
- */
+       setAuto: function(e,p) {
+               if ( e.notAuto ) return;
 
-jQuery.fx = function( elem, options, prop ){
+               if ( p == "height" && e.scrollHeight != parseInt(jQuery.curCSS(e,p)) ) return;
+               if ( p == "width" && e.scrollWidth != parseInt(jQuery.curCSS(e,p)) ) return;
 
-       var z = this;
+               // Remember the original height
+               var a = e.style[p];
 
-       // The users options
-       z.o = {
-               duration: options.duration || 400,
-               complete: options.complete
-       };
+               // Figure out the size of the height right now
+               var o = jQuery.curCSS(e,p,1);
 
-       // The element
-       z.el = elem;
+               if ( p == "height" && e.scrollHeight != o ||
+                       p == "width" && e.scrollWidth != o ) return;
 
-       // The styles
-       var y = z.el.style;
+               // Set the height to auto
+               e.style[p] = e.currentStyle ? "" : "auto";
 
-       // Simple function for setting a style value
-       z.a = function(){
-               if ( prop == "opacity" ) {
-                       if (z.now == 1) z.now = 0.9999;
-                       if (window.ActiveXObject)
-                               y.filter = "alpha(opacity=" + z.now*100 + ")";
-                       y.opacity = z.now;
-               } else
-                       y[prop] = z.now+"px";
-       };
+               // See what the size of "auto" is
+               var n = jQuery.curCSS(e,p,1);
 
-       // Figure out the maximum number to run to
-       z.max = function(){
-               return z.el["orig"+prop] || z.cur();
-       };
-
-       // Get the current size
-       z.cur = function(){
-               return parseFloat( jQuery.css(z.el,prop) );
-       };
-
-       // Start an animation from one number to another
-       z.custom = function(from,to){
-               z.startTime = (new Date()).getTime();
-               z.now = from;
-               z.a();
+               // Revert back to the original size
+               if ( o != n && n != "auto" ) {
+                       e.style[p] = a;
+                       e.notAuto = true;
+               }
+       },
+       
+       speed: function(s,o,i) {
+               o = o || {};
+               
+               if ( o.constructor == Function )
+                       o = { complete: o };
+               
+               var ss = { slow: 600, fast: 200 };
+               o.duration = (s && s.constructor == Number ? s : ss[s]) || 400;
+       
+               // Queueing
+               o.oldComplete = o.complete;
+               o.complete = function(){
+                       jQuery.dequeue(this, "fx");
+                       if ( o.oldComplete && o.oldComplete.constructor == Function )
+                               o.oldComplete.apply( this );
+               };
+               
+               if ( i > 0 )
+                       o.complete = null;
+       
+               return o;
+       },
+       
+       queue: {},
+       
+       dequeue: function(elem,type){
+               type = type || "fx";
+       
+               if ( elem.queue && elem.queue[type] ) {
+                       // Remove self
+                       elem.queue[type].shift();
+       
+                       // Get next function
+                       var f = elem.queue[type][0];
+               
+                       if ( f ) f.apply( elem );
+               }
+       },
 
-               z.timer = setInterval(function(){
-                       z.step(from, to);
-               }, 13);
-       };
+       /*
+        * I originally wrote fx() as a clone of moo.fx and in the process
+        * of making it small in size the code became illegible to sane
+        * people. You've been warned.
+        */
+       
+       fx: function( elem, options, prop ){
+       
+               var z = this;
+       
+               // The users options
+               z.o = {
+                       duration: options.duration || 400,
+                       complete: options.complete
+               };
+       
+               // The element
+               z.el = elem;
+       
+               // The styles
+               var y = z.el.style;
+       
+               // Simple function for setting a style value
+               z.a = function(){
+                       if ( prop == "opacity" ) {
+                               if (z.now == 1) z.now = 0.9999;
+                               if (window.ActiveXObject)
+                                       y.filter = "alpha(opacity=" + z.now*100 + ")";
+                               else
+                                       y.opacity = z.now;
+
+                       // My hate for IE will never die
+                       } else if ( parseInt(z.now) )
+                               y[prop] = parseInt(z.now) + "px";
+                       y.display = "block";
+               };
+       
+               // Figure out the maximum number to run to
+               z.max = function(){
+                       return parseFloat( jQuery.css(z.el,prop) );
+               };
+       
+               // Get the current size
+               z.cur = function(){
+                       return parseFloat( jQuery.curCSS(z.el, prop) ) || z.max();
+               };
+       
+               // Start an animation from one number to another
+               z.custom = function(from,to){
+                       z.startTime = (new Date()).getTime();
+                       z.now = from;
+                       z.a();
+       
+                       z.timer = setInterval(function(){
+                               z.step(from, to);
+                       }, 13);
+               };
+       
+               // Simple 'show' function
+               z.show = function( p ){
+                       if ( !z.el.orig ) z.el.orig = {};
 
-       // Simple 'show' function
-       z.show = function(){
-               y.display = "block";
-               z.o.auto = true;
-               z.custom(0,z.max());
-       };
+                       // Remember where we started, so that we can go back to it later
+                       z.el.orig[prop] = this.cur();
 
-       // Simple 'hide' function
-       z.hide = function(){
-               // Remember where we started, so that we can go back to it later
-               z.el["orig"+prop] = this.cur();
+                       z.custom( 0, z.el.orig[prop] );
 
-               // Begin the animation
-               z.custom(z.cur(),0);
-       };
+                       // Stupid IE, look what you made me do
+                       if ( prop != "opacity" )
+                               y[prop] = "1px";
+               };
+       
+               // Simple 'hide' function
+               z.hide = function(){
+                       if ( !z.el.orig ) z.el.orig = {};
 
-       // IE has trouble with opacity if it doesn't have layout
-       if ( jQuery.browser == "msie" && !z.el.currentStyle.hasLayout )
-               y.zoom = 1;
+                       // Remember where we started, so that we can go back to it later
+                       z.el.orig[prop] = this.cur();
 
-       // Remember  the overflow of the element
-       z.oldOverflow = y.overflow;
+                       z.o.hide = true;
 
-       // Make sure that nothing sneaks out
-       y.overflow = "hidden";
+                       // Begin the animation
+                       z.custom(z.cur(),0);
+               };
+       
+               // IE has trouble with opacity if it does not have layout
+               if ( jQuery.browser.msie && !z.el.currentStyle.hasLayout )
+                       y.zoom = "1";
+       
+               // Remember  the overflow of the element
+               if ( !z.el.oldOverlay )
+                       z.el.oldOverflow = jQuery.css( z.el, "overflow" );
+       
+               // Make sure that nothing sneaks out
+               //if ( z.el.oldOverlay == "visible" )
+               y.overflow = "hidden";
+       
+               // Each step of an animation
+               z.step = function(firstNum, lastNum){
+                       var t = (new Date()).getTime();
+       
+                       if (t > z.o.duration + z.startTime) {
+                               // Stop the timer
+                               clearInterval(z.timer);
+                               z.timer = null;
 
-       // Each step of an animation
-       z.step = function(firstNum, lastNum){
-               var t = (new Date()).getTime();
+                               z.now = lastNum;
+                               z.a();
 
-               if (t > z.o.duration + z.startTime) {
-                       // Stop the timer
-                       clearInterval(z.timer);
-                       z.timer = null;
+                               // Hide the element if the "hide" operation was done
+                               if ( z.o.hide ) y.display = 'none';
+       
+                               // Reset the overflow
+                               y.overflow = z.el.oldOverflow;
 
-                       z.now = lastNum;
-                       z.a();
+                               // If a callback was provided, execute it
+                               if( z.o.complete && z.o.complete.constructor == Function )
+                                       // Execute the complete function
+                                       z.o.complete.apply( z.el );
 
-                       // Reset the overflow
-                       y.overflow = z.oldOverflow;
+                               // Reset the property, if the item has been hidden
+                               if ( z.o.hide )
+                                       y[ prop ] = z.el.orig[ prop ].constructor == Number && prop != "opacity" ?
+                                               z.el.orig[prop] + "px" : z.el.orig[prop];
 
-                       // If the element was shown, and not using a custom number,
-                       // set its height and/or width to auto
-                       if ( (prop == "height" || prop == "width") && z.o.auto )
+                               // set its height and/or width to auto
                                jQuery.setAuto( z.el, prop );
-
-                       // If a callback was provided, execute it
-                       if( z.o.complete && z.o.complete.constructor == Function ) {
-
-                               // Yes, this is a weird place for this, but it needs to be executed
-                               // only once per cluster of effects.
-                               // If the element is, effectively, hidden - hide it
-                               if ( y.height == "0px" || y.width == "0px" )
-                                       y.display = "none";
-
-                               // Execute the complete function
-                               z.o.complete.apply( z.el );
+                       } else {
+                               // Figure out where in the animation we are and set the number
+                               var p = (t - this.startTime) / z.o.duration;
+                               z.now = ((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;
+       
+                               // Perform the next step of the animation
+                               z.a();
                        }
-               } else {
-                       // Figure out where in the animation we are and set the number
-                       var p = (t - this.startTime) / z.o.duration;
-                       z.now = ((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;
-
-                       // Perform the next step of the animation
-                       z.a();
-               }
-       };
+               };
+       
+       }
 
-};
+});