3 // overwrite the old show method
7 * Show all matched elements using a graceful animation and firing an
8 * optional callback after completion.
10 * The height, width, and opacity of each of the matched elements
11 * are changed dynamically according to the specified speed.
13 * @example $("p").show("slow");
15 * @example $("p").show("slow",function(){
16 * alert("Animation Done.");
21 * @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).
22 * @param Function callback (optional) A function to be executed whenever the animation completes.
23 * @param String easing (optional) easing effect
24 * @cat Effects/Animations
25 * @see hide(String|Number,Function)
27 show: function(speed,callback, easing){
28 return speed ? this.animate({
29 height: "show", width: "show", opacity: "show"
30 }, speed, callback, easing) : this._show();
33 // Overwrite the old hide method
34 _hide: jQuery.fn.hide,
37 * Hide all matched elements using a graceful animation and firing an
38 * optional callback after completion.
40 * The height, width, and opacity of each of the matched elements
41 * are changed dynamically according to the specified speed.
43 * @example $("p").hide("slow");
45 * @example $("p").hide("slow",function(){
46 * alert("Animation Done.");
51 * @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).
52 * @param Function callback (optional) A function to be executed whenever the animation completes.
53 * @param String easing (optional) easing effect
54 * @cat Effects/Animations
55 * @see show(String|Number,Function)
57 hide: function(speed,callback, easing){
58 return speed ? this.animate({
59 height: "hide", width: "hide", opacity: "hide"
60 }, speed, callback, easing) : this._hide();
64 * Reveal all matched elements by adjusting their height and firing an
65 * optional callback after completion.
67 * Only the height is adjusted for this animation, causing all matched
68 * elements to be revealed in a "sliding" manner.
70 * @example $("p").slideDown("slow");
72 * @example $("p").slideDown("slow",function(){
73 * alert("Animation Done.");
78 * @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).
79 * @param Function callback (optional) A function to be executed whenever the animation completes.
80 * @param String easing (optional) easing effect
81 * @cat Effects/Animations
82 * @see slideUp(String|Number,Function)
83 * @see slideToggle(String|Number,Function)
85 slideDown: function(speed,callback, easing){
86 return this.animate({height: "show"}, speed, callback, easing);
90 * Hide all matched elements by adjusting their height and firing an
91 * optional callback after completion.
93 * Only the height is adjusted for this animation, causing all matched
94 * elements to be hidden in a "sliding" manner.
96 * @example $("p").slideUp("slow");
98 * @example $("p").slideUp("slow",function(){
99 * alert("Animation Done.");
104 * @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).
105 * @param Function callback (optional) A function to be executed whenever the animation completes.
106 * @param String easing (optional) easing effect
107 * @cat Effects/Animations
108 * @see slideDown(String|Number,Function)
109 * @see slideToggle(String|Number,Function)
111 slideUp: function(speed,callback, easing){
112 return this.animate({height: "hide"}, speed, callback, easing);
116 * Toggle the visibility of all matched elements by adjusting their height and firing an
117 * optional callback after completion.
119 * Only the height is adjusted for this animation, causing all matched
120 * elements to be hidden in a "sliding" manner.
122 * @example $("p").slideToggle("slow");
124 * @example $("p").slideToggle("slow",function(){
125 * alert("Animation Done.");
130 * @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).
131 * @param Function callback (optional) A function to be executed whenever the animation completes.
132 * @param String easing (optional) easing effect
133 * @cat Effects/Animations
134 * @see slideDown(String|Number,Function)
135 * @see slideUp(String|Number,Function)
137 slideToggle: function(speed, callback, easing){
138 return this.each(function(){
139 var state = jQuery(this).is(":hidden") ? "show" : "hide";
140 jQuery(this).animate({height: state}, speed, callback, easing);
145 * Fade in all matched elements by adjusting their opacity and firing an
146 * optional callback after completion.
148 * Only the opacity is adjusted for this animation, meaning that
149 * all of the matched elements should already have some form of height
150 * and width associated with them.
152 * @example $("p").fadeIn("slow");
154 * @example $("p").fadeIn("slow",function(){
155 * alert("Animation Done.");
160 * @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).
161 * @param Function callback (optional) A function to be executed whenever the animation completes.
162 * @param String easing (optional) easing effect
163 * @cat Effects/Animations
164 * @see fadeOut(String|Number,Function)
165 * @see fadeTo(String|Number,Number,Function)
167 fadeIn: function(speed, callback, easing){
168 return this.animate({opacity: "show"}, speed, callback, easing);
172 * Fade out all matched elements by adjusting their opacity and firing an
173 * optional callback after completion.
175 * Only the opacity is adjusted for this animation, meaning that
176 * all of the matched elements should already have some form of height
177 * and width associated with them.
179 * @example $("p").fadeOut("slow");
181 * @example $("p").fadeOut("slow",function(){
182 * alert("Animation Done.");
187 * @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).
188 * @param Function callback (optional) A function to be executed whenever the animation completes.
189 * @param String easing (optional) easing effect
190 * @cat Effects/Animations
191 * @see fadeIn(String|Number,Function)
192 * @see fadeTo(String|Number,Number,Function)
194 fadeOut: function(speed, callback, easing){
195 return this.animate({opacity: "hide"}, speed, callback, easing);
199 * Fade the opacity of all matched elements to a specified opacity and firing an
200 * optional callback after completion.
202 * Only the opacity is adjusted for this animation, meaning that
203 * all of the matched elements should already have some form of height
204 * and width associated with them.
206 * @example $("p").fadeTo("slow", 0.5);
208 * @example $("p").fadeTo("slow", 0.5, function(){
209 * alert("Animation Done.");
214 * @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).
215 * @param Number opacity The opacity to fade to (a number from 0 to 1).
216 * @param Function callback (optional) A function to be executed whenever the animation completes.
217 * @param String easing (optional) easing effect
218 * @cat Effects/Animations
219 * @see fadeIn(String|Number,Function)
220 * @see fadeOut(String|Number,Function)
222 fadeTo: function(speed,to,callback, easing){
223 return this.animate({opacity: to}, speed, callback, easing);
227 * A function for making your own, custom, animations. The key aspect of
228 * this function is the object of style properties that will be animated,
229 * and to what end. Each key within the object represents a style property
230 * that will also be animated (for example: "height", "top", or "opacity").
232 * The value associated with the key represents to what end the property
233 * will be animated. If a number is provided as the value, then the style
234 * property will be transitioned from its current state to that new number.
235 * Oterwise if the string "hide", "show", or "toggle" is provided, a default
236 * animation will be constructed for that property.
238 * @example $("p").animate({
239 * height: 'toggle', opacity: 'toggle'
242 * @example $("p").animate({
243 * left: 50, opacity: 'show'
248 * @param Hash params A set of style attributes that you wish to animate, and to what end.
249 * @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).
250 * @param Function callback (optional) A function to be executed whenever the animation completes.
251 * @param String easing (optional) easing effect
252 * @cat Effects/Animations
254 animate: function(prop,speed,callback, easing) {
255 return this.queue(function(){
257 this.curAnim = jQuery.extend({}, prop);
259 for ( var p in prop ) {
260 var e = new jQuery.fx( this, jQuery.speed(speed,callback), p, easing );
261 if ( prop[p].constructor == Number )
262 e.custom( e.cur(), prop[p] );
264 e[ prop[p] ]( prop );
274 queue: function(type,fn){
280 return this.each(function(){
284 if ( !this.queue[type] )
285 this.queue[type] = [];
287 this.queue[type].push( fn );
289 if ( this.queue[type].length == 1 )
298 speed: function(s,o) {
301 if ( o.constructor == Function )
304 var ss = { slow: 600, fast: 200 };
305 o.duration = (s && s.constructor == Number ? s : ss[s]) || 400;
308 o.oldComplete = o.complete;
309 o.complete = function(){
310 jQuery.dequeue(this, "fx");
311 if ( o.oldComplete && o.oldComplete.constructor == Function )
312 o.oldComplete.apply( this );
320 dequeue: function(elem,type){
323 if ( elem.queue && elem.queue[type] ) {
325 elem.queue[type].shift();
328 var f = elem.queue[type][0];
330 if ( f ) f.apply( elem );
335 * I originally wrote fx() as a clone of moo.fx and in the process
336 * of making it small in size the code became illegible to sane
337 * people. You've been warned.
340 fx: function( elem, options, prop, easing ){
346 duration: options.duration || 400,
347 complete: options.complete,
349 easing : easing || 'linear'
358 // Store display property
359 var oldDisplay = jQuery.css(z.el, 'display');
360 // Set display property to block for animation
362 // Make sure that nothing sneaks out
363 y.overflow = "hidden";
365 // Simple function for setting a style value
368 options.step.apply( elem, [ z.now ] );
370 if ( prop == "opacity" )
371 jQuery.attr(y, "opacity", z.now); // Let attr handle opacity
372 else if ( parseInt(z.now) ) // My hate for IE will never die
373 y[prop] = parseInt(z.now) + "px";
376 // Figure out the maximum number to run to
378 return parseFloat( jQuery.css(z.el,prop) );
381 // Get the current size
383 var r = parseFloat( jQuery.curCSS(z.el, prop) );
384 return r && r > -10000 ? r : z.max();
387 // Start an animation from one number to another
388 z.custom = function(from,to){
389 z.startTime = (new Date()).getTime();
393 z.timer = setInterval(function(){
398 // Simple 'show' function
400 if ( !z.el.orig ) z.el.orig = {};
402 // Remember where we started, so that we can go back to it later
403 z.el.orig[prop] = this.cur();
407 // Begin the animation
408 z.custom(0, z.el.orig[prop]);
410 // Stupid IE, look what you made me do
411 if ( prop != "opacity" )
415 // Simple 'hide' function
417 if ( !z.el.orig ) z.el.orig = {};
419 // Remember where we started, so that we can go back to it later
420 z.el.orig[prop] = this.cur();
424 // Begin the animation
425 z.custom(z.el.orig[prop], 0);
428 //Simple 'toggle' function
429 z.toggle = function() {
430 if ( !z.el.orig ) z.el.orig = {};
432 // Remember where we started, so that we can go back to it later
433 z.el.orig[prop] = this.cur();
435 if(oldDisplay == 'none') {
438 // Stupid IE, look what you made me do
439 if ( prop != "opacity" )
442 // Begin the animation
443 z.custom(0, z.el.orig[prop]);
447 // Begin the animation
448 z.custom(z.el.orig[prop], 0);
452 // Each step of an animation
453 z.step = function(firstNum, lastNum){
454 var t = (new Date()).getTime();
456 if (t > z.o.duration + z.startTime) {
458 clearInterval(z.timer);
464 if (z.el.curAnim) z.el.curAnim[ prop ] = true;
467 for ( var i in z.el.curAnim )
468 if ( z.el.curAnim[i] !== true )
472 // Reset the overflow
476 y.display = oldDisplay;
477 if (jQuery.css(z.el, 'display') == 'none')
480 // Hide the element if the "hide" operation was done
484 // Reset the properties, if the item has been hidden or shown
485 if ( z.o.hide || z.o.show )
486 for ( var p in z.el.curAnim )
488 jQuery.attr(y, p, z.el.orig[p]);
493 // If a callback was provided, execute it
494 if( done && z.o.complete && z.o.complete.constructor == Function )
495 // Execute the complete function
496 z.o.complete.apply( z.el );
498 var n = t - this.startTime;
499 // Figure out where in the animation we are and set the number
500 var p = n / z.o.duration;
501 //if the easing exists the use it else use default linear easing
502 if (jQuery.easing[z.o.easing])
503 z.now = jQuery.easing[z.o.easing](p, n, firstNum, (lastNum-firstNum), z.o.duration);
505 z.now = jQuery.easingLinear(p, n, firstNum, (lastNum-firstNum), z.o.duration);
507 // Perform the next step of the animation
514 easingLinear : function(p, n, firstNum, delta, duration) {
516 return ((-Math.cos(p*Math.PI)/2) + 0.5) * delta + firstNum;
521 * @param Integer p period step in animation
522 * @param Integer n current time
523 * @param Mixed firstNum begin value
524 * @param Mixed delta change in
525 * @param Integer duration duration
528 linear: function(p, n, firstNum, delta, duration) {
530 return ((-Math.cos(p*Math.PI)/2) + 0.5) * delta + firstNum;
533 easein: function(p, n, firstNum, delta, duration) {
534 return delta*(n/=duration)*n*n + firstNum;
537 easeou: function(p, n, firstNum, delta, duration) {
538 return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
541 easeboth: function(p, n, firstNum, delta, duration) {
542 if ((n/=duration/2) < 1)
543 return delta/2*n*n*n*n + firstNum;
544 return -delta/2 * ((n-=2)*n*n*n - 2) + firstNum;
547 bounceout: function(p, n, firstNum, delta, duration) {
548 if ((n/=duration) < (1/2.75)) {
549 return delta*(7.5625*n*n) + firstNum;
550 } else if (n < (2/2.75)) {
551 return delta*(7.5625*(n-=(1.5/2.75))*n + .75) + firstNum;
552 } else if (n < (2.5/2.75)) {
553 return delta*(7.5625*(n-=(2.25/2.75))*n + .9375) + firstNum;
555 return delta*(7.5625*(n-=(2.625/2.75))*n + .984375) + firstNum;
559 bouncein: function(p, n, firstNum, delta, duration) {
560 if (jQuery.easing.bounceout)
561 return delta - jQuery.easing.bounceout (p, duration - n, 0, delta, duration) + firstNum;
562 return firstNum + delta;
565 bounceboth: function(p, n, firstNum, delta, duration) {
566 if (jQuery.easing.bouncein && jQuery.easing.bounceout)
568 return jQuery.easing.bouncein(p, n*2, 0, delta, duration) * .5 + firstNum;
569 return jQuery.easing.bounceout(p, n*2-duration, 0, delta, duration) * .5 + delta*.5 + firstNum;
570 return firstNum + delta;
573 elasticin: function(p, n, firstNum, delta, duration) {
577 if ((n/=duration)==1)
578 return firstNum+delta;
581 if (a < Math.abs(delta)) {
585 s = p/(2*Math.PI) * Math.asin (delta/a);
587 return -(a*Math.pow(2,10*(n-=1)) * Math.sin( (n*duration-s)*(2*Math.PI)/p )) + firstNum;
590 elasticout:function(p, n, firstNum, delta, duration) {
594 if ((n/=duration/2)==2)
595 return firstNum + delta;
598 if (a < Math.abs(delta)){
602 s = p/(2*Math.PI) * Math.asin (delta/a);
604 return a*Math.pow(2,-10*n) * Math.sin( (n*duration-s)*(2*Math.PI)/p ) + delta + firstNum;
607 elasticboth: function(p, n, firstNum, delta, duration) {
611 if ((n/=duration/2)==2)
612 return firstNum + delta;
615 if (a < Math.abs(delta)){
619 s = p/(2*Math.PI) * Math.asin (delta/a);
622 return -.5*(a*Math.pow(2,10*(n-=1)) * Math.sin( (n*duration-s)*(2*Math.PI)/p )) + firstNum;
624 return a*Math.pow(2,-10*(n-=1)) * Math.sin( (n*duration-s)*(2*Math.PI)/p )*.5 + delta + firstNum;