Removed easing formulas and placed them as a plugin under interface
[jquery.git] / src / fx / fx.js
index 308567c..f0b9c8e 100644 (file)
@@ -4,285 +4,223 @@ jQuery.fn.extend({
        _show: jQuery.fn.show,\r
        \r
        /**\r
-        * Show all matched elements using a graceful animation.\r
+        * Show all matched elements using a graceful animation and firing an\r
+        * optional callback after completion.\r
+        *\r
         * The height, width, and opacity of each of the matched elements \r
         * are changed dynamically according to the specified speed.\r
         *\r
         * @example $("p").show("slow");\r
         *\r
-        * @name show\r
-        * @type jQuery\r
-        * @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).\r
-        * @cat Effects/Animations\r
-        */\r
-        \r
-       /**\r
-        * Show all matched elements using a graceful animation and firing a callback\r
-        * function after completion.\r
-        * The height, width, and opacity of each of the matched elements \r
-        * are changed dynamically according to the specified speed.\r
-        *\r
         * @example $("p").show("slow",function(){\r
         *   alert("Animation Done.");\r
         * });\r
         *\r
         * @name show\r
         * @type jQuery\r
-        * @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).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param String|Number 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).\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
+        * @see hide(String|Number,Function)\r
         */\r
-       show: function(speed,callback){\r
+       show: function(speed,callback, easing){\r
                return speed ? this.animate({\r
                        height: "show", width: "show", opacity: "show"\r
-               }, speed, callback) : this._show();\r
+               }, speed, callback, easing) : this._show();\r
        },\r
        \r
        // Overwrite the old hide method\r
        _hide: jQuery.fn.hide,\r
        \r
        /**\r
-        * Hide all matched elements using a graceful animation.\r
+        * Hide all matched elements using a graceful animation and firing an\r
+        * optional callback after completion.\r
+        *\r
         * The height, width, and opacity of each of the matched elements \r
         * are changed dynamically according to the specified speed.\r
         *\r
         * @example $("p").hide("slow");\r
         *\r
-        * @name hide\r
-        * @type jQuery\r
-        * @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).\r
-        * @cat Effects/Animations\r
-        */\r
-        \r
-       /**\r
-        * Hide all matched elements using a graceful animation and firing a callback\r
-        * function after completion.\r
-        * The height, width, and opacity of each of the matched elements \r
-        * are changed dynamically according to the specified speed.\r
-        *\r
         * @example $("p").hide("slow",function(){\r
         *   alert("Animation Done.");\r
         * });\r
         *\r
         * @name hide\r
         * @type jQuery\r
-        * @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).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param String|Number 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).\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
+        * @see show(String|Number,Function)\r
         */\r
-       hide: function(speed,callback){\r
+       hide: function(speed,callback, easing){\r
                return speed ? this.animate({\r
                        height: "hide", width: "hide", opacity: "hide"\r
-               }, speed, callback) : this._hide();\r
+               }, speed, callback, easing) : this._hide();\r
        },\r
        \r
        /**\r
-        * Reveal all matched elements by adjusting their height.\r
+        * Reveal all matched elements by adjusting their height and firing an\r
+        * optional callback after completion.\r
+        *\r
         * Only the height is adjusted for this animation, causing all matched\r
         * elements to be revealed in a "sliding" manner.\r
         *\r
         * @example $("p").slideDown("slow");\r
         *\r
-        * @name slideDown\r
-        * @type jQuery\r
-        * @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).\r
-        * @cat Effects/Animations\r
-        */\r
-        \r
-       /**\r
-        * Reveal all matched elements by adjusting their height and firing a callback\r
-        * function after completion.\r
-        * Only the height is adjusted for this animation, causing all matched\r
-        * elements to be revealed in a "sliding" manner.\r
-        *\r
         * @example $("p").slideDown("slow",function(){\r
         *   alert("Animation Done.");\r
         * });\r
         *\r
         * @name slideDown\r
         * @type jQuery\r
-        * @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).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param String|Number speed (optional) 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).\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
+        * @see slideUp(String|Number,Function)\r
+        * @see slideToggle(String|Number,Function)\r
         */\r
-       slideDown: function(speed,callback){\r
-               return this.animate({height: "show"}, speed, callback);\r
+       slideDown: function(speed,callback, easing){\r
+               return this.animate({height: "show"}, speed, callback, easing);\r
        },\r
        \r
        /**\r
-        * Hide all matched elements by adjusting their height.\r
+        * Hide all matched elements by adjusting their height and firing an\r
+        * optional callback after completion.\r
+        *\r
         * Only the height is adjusted for this animation, causing all matched\r
         * elements to be hidden in a "sliding" manner.\r
         *\r
         * @example $("p").slideUp("slow");\r
         *\r
-        * @name slideUp\r
-        * @type jQuery\r
-        * @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).\r
-        * @cat Effects/Animations\r
-        */\r
-        \r
-       /**\r
-        * Hide all matched elements by adjusting their height and firing a callback\r
-        * function after completion.\r
-        * Only the height is adjusted for this animation, causing all matched\r
-        * elements to be hidden in a "sliding" manner.\r
-        *\r
         * @example $("p").slideUp("slow",function(){\r
         *   alert("Animation Done.");\r
         * });\r
         *\r
         * @name slideUp\r
         * @type jQuery\r
-        * @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).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param String|Number speed (optional) 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).\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
+        * @see slideDown(String|Number,Function)\r
+        * @see slideToggle(String|Number,Function)\r
         */\r
-       slideUp: function(speed,callback){\r
-               return this.animate({height: "hide"}, speed, callback);\r
+       slideUp: function(speed,callback, easing){\r
+               return this.animate({height: "hide"}, speed, callback, easing);\r
        },\r
 \r
        /**\r
-        * Toggle the visibility of all matched elements by adjusting their height.\r
+        * Toggle the visibility of all matched elements by adjusting their height and firing an\r
+        * optional callback after completion.\r
+        *\r
         * Only the height is adjusted for this animation, causing all matched\r
         * elements to be hidden in a "sliding" manner.\r
         *\r
         * @example $("p").slideToggle("slow");\r
         *\r
-        * @name slideToggle\r
-        * @type jQuery\r
-        * @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).\r
-        * @cat Effects/Animations\r
-        */\r
-        \r
-       /**\r
-        * Toggle the visibility of all matched elements by adjusting their height\r
-        * and firing a callback function after completion.\r
-        * Only the height is adjusted for this animation, causing all matched\r
-        * elements to be hidden in a "sliding" manner.\r
-        *\r
         * @example $("p").slideToggle("slow",function(){\r
         *   alert("Animation Done.");\r
         * });\r
         *\r
         * @name slideToggle\r
         * @type jQuery\r
-        * @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).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param String|Number speed (optional) 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).\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
+        * @see slideDown(String|Number,Function)\r
+        * @see slideUp(String|Number,Function)\r
         */\r
-       slideToggle: function(speed,callback){\r
+       slideToggle: function(speed, callback, easing){\r
                return this.each(function(){\r
                        var state = jQuery(this).is(":hidden") ? "show" : "hide";\r
-                       jQuery(this).animate({height: state}, speed, callback);\r
+                       jQuery(this).animate({height: state}, speed, callback, easing);\r
                });\r
        },\r
        \r
        /**\r
-        * Fade in all matched elements by adjusting their opacity.\r
+        * Fade in all matched elements by adjusting their opacity and firing an\r
+        * optional callback after completion.\r
+        *\r
         * Only the opacity is adjusted for this animation, meaning that\r
         * all of the matched elements should already have some form of height\r
         * and width associated with them.\r
         *\r
         * @example $("p").fadeIn("slow");\r
         *\r
-        * @name fadeIn\r
-        * @type jQuery\r
-        * @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).\r
-        * @cat Effects/Animations\r
-        */\r
-        \r
-       /**\r
-        * Fade in all matched elements by adjusting their opacity and firing a \r
-        * callback function after completion.\r
-        * Only the opacity is adjusted for this animation, meaning that\r
-        * all of the matched elements should already have some form of height\r
-        * and width associated with them.\r
-        *\r
         * @example $("p").fadeIn("slow",function(){\r
         *   alert("Animation Done.");\r
         * });\r
         *\r
         * @name fadeIn\r
         * @type jQuery\r
-        * @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).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param String|Number speed (optional) 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).\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
+        * @see fadeOut(String|Number,Function)\r
+        * @see fadeTo(String|Number,Number,Function)\r
         */\r
-       fadeIn: function(speed,callback){\r
-               return this.animate({opacity: "show"}, speed, callback);\r
+       fadeIn: function(speed, callback, easing){\r
+               return this.animate({opacity: "show"}, speed, callback, easing);\r
        },\r
        \r
        /**\r
-        * Fade out all matched elements by adjusting their opacity.\r
+        * Fade out all matched elements by adjusting their opacity and firing an\r
+        * optional callback after completion.\r
+        *\r
         * Only the opacity is adjusted for this animation, meaning that\r
         * all of the matched elements should already have some form of height\r
         * and width associated with them.\r
         *\r
         * @example $("p").fadeOut("slow");\r
         *\r
-        * @name fadeOut\r
-        * @type jQuery\r
-        * @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).\r
-        * @cat Effects/Animations\r
-        */\r
-        \r
-       /**\r
-        * Fade out all matched elements by adjusting their opacity and firing a \r
-        * callback function after completion.\r
-        * Only the opacity is adjusted for this animation, meaning that\r
-        * all of the matched elements should already have some form of height\r
-        * and width associated with them.\r
-        *\r
         * @example $("p").fadeOut("slow",function(){\r
         *   alert("Animation Done.");\r
         * });\r
         *\r
         * @name fadeOut\r
         * @type jQuery\r
-        * @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).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param String|Number speed (optional) 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).\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
+        * @see fadeIn(String|Number,Function)\r
+        * @see fadeTo(String|Number,Number,Function)\r
         */\r
-       fadeOut: function(speed,callback){\r
-               return this.animate({opacity: "hide"}, speed, callback);\r
+       fadeOut: function(speed, callback, easing){\r
+               return this.animate({opacity: "hide"}, speed, callback, easing);\r
        },\r
        \r
        /**\r
-        * Fade the opacity of all matched elements to a specified opacity.\r
+        * Fade the opacity of all matched elements to a specified opacity and firing an\r
+        * optional callback after completion.\r
+        *\r
         * Only the opacity is adjusted for this animation, meaning that\r
         * all of the matched elements should already have some form of height\r
         * and width associated with them.\r
         *\r
         * @example $("p").fadeTo("slow", 0.5);\r
         *\r
-        * @name fadeTo\r
-        * @type jQuery\r
-        * @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).\r
-        * @param Number opacity The opacity to fade to (a number from 0 to 1).\r
-        * @cat Effects/Animations\r
-        */\r
-        \r
-       /**\r
-        * Fade the opacity of all matched elements to a specified opacity and \r
-        * firing a callback function after completion.\r
-        * Only the opacity is adjusted for this animation, meaning that\r
-        * all of the matched elements should already have some form of height\r
-        * and width associated with them.\r
-        *\r
         * @example $("p").fadeTo("slow", 0.5, function(){\r
         *   alert("Animation Done.");\r
         * });\r
         *\r
         * @name fadeTo\r
         * @type jQuery\r
-        * @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).\r
+        * @param String|Number 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).\r
         * @param Number opacity The opacity to fade to (a number from 0 to 1).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
+        * @see fadeIn(String|Number,Function)\r
+        * @see fadeOut(String|Number,Function)\r
         */\r
-       fadeTo: function(speed,to,callback){\r
-               return this.animate({opacity: to}, speed, callback);\r
+       fadeTo: function(speed,to,callback, easing){\r
+               return this.animate({opacity: to}, speed, callback, easing);\r
        },\r
        \r
        /**\r
@@ -308,17 +246,18 @@ jQuery.fn.extend({
         * @name animate\r
         * @type jQuery\r
         * @param Hash params A set of style attributes that you wish to animate, and to what end.\r
-        * @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).\r
-        * @param Function callback A function to be executed whenever the animation completes.\r
+        * @param String|Number speed (optional) 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).\r
+        * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+        * @param String easing (optional) easing effect\r
         * @cat Effects/Animations\r
         */\r
-       animate: function(prop,speed,callback) {\r
+       animate: function(prop,speed,callback, easing) {\r
                return this.queue(function(){\r
                \r
                        this.curAnim = jQuery.extend({}, prop);\r
                        \r
                        for ( var p in prop ) {\r
-                               var e = new jQuery.fx( this, jQuery.speed(speed,callback), p );\r
+                               var e = new jQuery.fx( this, jQuery.speed(speed,callback), p, easing );\r
                                if ( prop[p].constructor == Number )\r
                                        e.custom( e.cur(), prop[p] );\r
                                else\r
@@ -398,7 +337,7 @@ jQuery.extend({
         * people. You've been warned.\r
         */\r
        \r
-       fx: function( elem, options, prop ){\r
+       fx: function( elem, options, prop, easing ){\r
 \r
                var z = this;\r
 \r
@@ -406,9 +345,10 @@ jQuery.extend({
                z.o = {\r
                        duration: options.duration || 400,\r
                        complete: options.complete,\r
-                       step: options.step\r
+                       step: options.step,\r
+                       easing : easing || 'linear'\r
                };\r
-\r
+               \r
                // The element\r
                z.el = elem;\r
 \r
@@ -555,9 +495,14 @@ jQuery.extend({
                                        // Execute the complete function\r
                                        z.o.complete.apply( z.el );\r
                        } else {\r
+                               var n = t - this.startTime;\r
                                // Figure out where in the animation we are and set the number\r
-                               var p = (t - this.startTime) / z.o.duration;\r
-                               z.now = ((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;\r
+                               var p = n / z.o.duration;\r
+                               //if the easing function exists then use it else use default linear easing\r
+                               if (jQuery.easing && jQuery.easing[z.o.easing])\r
+                                       z.now = jQuery.easing[z.o.easing](p, n,  firstNum, (lastNum-firstNum), z.o.duration);\r
+                               else \r
+                                       z.now = ((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;\r
 \r
                                // Perform the next step of the animation\r
                                z.a();\r
@@ -565,5 +510,4 @@ jQuery.extend({
                };\r
        \r
        }\r
-\r
-});\r
+});
\ No newline at end of file