Added the Speed Test Suite. Can be made by doing 'make speed'.
[jquery.git] / src / fx / fx.js
1 jQuery.fn.extend({
2
3         /**
4          * Displays each of the set of matched elements if they are hidden.
5          *
6          * @example $("p").show()
7          * @before <p style="display: none">Hello</p>
8          * @result [ <p style="display: block">Hello</p> ]
9          *
10          * @name show
11          * @type jQuery
12          * @cat Effects
13          */
14         
15         /**
16          * Show all matched elements using a graceful animation and firing an
17          * optional callback after completion.
18          *
19          * The height, width, and opacity of each of the matched elements 
20          * are changed dynamically according to the specified speed.
21          *
22          * @example $("p").show("slow");
23          *
24          * @example $("p").show("slow",function(){
25          *   alert("Animation Done.");
26          * });
27          *
28          * @name show
29          * @type jQuery
30          * @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).
31          * @param Function callback (optional) A function to be executed whenever the animation completes.
32          * @cat Effects
33          * @see hide(String|Number,Function)
34          */
35         show: function(speed,callback){
36                 return speed ?
37                         this.animate({
38                                 height: "show", width: "show", opacity: "show"
39                         }, speed, callback) :
40                         
41                         this.filter(":hidden").each(function(){
42                                 this.style.display = this.oldblock ? this.oldblock : "";
43                                 if ( jQuery.css(this,"display") == "none" )
44                                         this.style.display = "block";
45                         }).end();
46         },
47         
48         /**
49          * Hides each of the set of matched elements if they are shown.
50          *
51          * @example $("p").hide()
52          * @before <p>Hello</p>
53          * @result [ <p style="display: none">Hello</p> ]
54          *
55          * @name hide
56          * @type jQuery
57          * @cat Effects
58          */
59         
60         /**
61          * Hide all matched elements using a graceful animation and firing an
62          * optional callback after completion.
63          *
64          * The height, width, and opacity of each of the matched elements 
65          * are changed dynamically according to the specified speed.
66          *
67          * @example $("p").hide("slow");
68          *
69          * @example $("p").hide("slow",function(){
70          *   alert("Animation Done.");
71          * });
72          *
73          * @name hide
74          * @type jQuery
75          * @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).
76          * @param Function callback (optional) A function to be executed whenever the animation completes.
77          * @cat Effects
78          * @see show(String|Number,Function)
79          */
80         hide: function(speed,callback){
81                 return speed ?
82                         this.animate({
83                                 height: "hide", width: "hide", opacity: "hide"
84                         }, speed, callback) :
85                         
86                         this.filter(":visible").each(function(){
87                                 this.oldblock = this.oldblock || jQuery.css(this,"display");
88                                 if ( this.oldblock == "none" )
89                                         this.oldblock = "block";
90                                 this.style.display = "none";
91                         }).end();
92         },
93
94         // Save the old toggle function
95         _toggle: jQuery.fn.toggle,
96         
97         /**
98          * Toggles each of the set of matched elements. If they are shown,
99          * toggle makes them hidden. If they are hidden, toggle
100          * makes them shown.
101          *
102          * @example $("p").toggle()
103          * @before <p>Hello</p><p style="display: none">Hello Again</p>
104          * @result [ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]
105          *
106          * @name toggle
107          * @type jQuery
108          * @cat Effects
109          */
110         toggle: function( fn, fn2 ){
111                 return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ?
112                         this._toggle( fn, fn2 ) :
113                         fn ?
114                                 this.animate({
115                                         height: "toggle", width: "toggle", opacity: "toggle"
116                                 }, fn, fn2) :
117                                 this.each(function(){
118                                         jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();
119                                 });
120         },
121         
122         /**
123          * Reveal all matched elements by adjusting their height and firing an
124          * optional callback after completion.
125          *
126          * Only the height is adjusted for this animation, causing all matched
127          * elements to be revealed in a "sliding" manner.
128          *
129          * @example $("p").slideDown("slow");
130          *
131          * @example $("p").slideDown("slow",function(){
132          *   alert("Animation Done.");
133          * });
134          *
135          * @name slideDown
136          * @type jQuery
137          * @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).
138          * @param Function callback (optional) A function to be executed whenever the animation completes.
139          * @cat Effects
140          * @see slideUp(String|Number,Function)
141          * @see slideToggle(String|Number,Function)
142          */
143         slideDown: function(speed,callback){
144                 return this.animate({height: "show"}, speed, callback);
145         },
146         
147         /**
148          * Hide all matched elements by adjusting their height and firing an
149          * optional callback after completion.
150          *
151          * Only the height is adjusted for this animation, causing all matched
152          * elements to be hidden in a "sliding" manner.
153          *
154          * @example $("p").slideUp("slow");
155          *
156          * @example $("p").slideUp("slow",function(){
157          *   alert("Animation Done.");
158          * });
159          *
160          * @name slideUp
161          * @type jQuery
162          * @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).
163          * @param Function callback (optional) A function to be executed whenever the animation completes.
164          * @cat Effects
165          * @see slideDown(String|Number,Function)
166          * @see slideToggle(String|Number,Function)
167          */
168         slideUp: function(speed,callback){
169                 return this.animate({height: "hide"}, speed, callback);
170         },
171
172         /**
173          * Toggle the visibility of all matched elements by adjusting their height and firing an
174          * optional callback after completion.
175          *
176          * Only the height is adjusted for this animation, causing all matched
177          * elements to be hidden in a "sliding" manner.
178          *
179          * @example $("p").slideToggle("slow");
180          *
181          * @example $("p").slideToggle("slow",function(){
182          *   alert("Animation Done.");
183          * });
184          *
185          * @name slideToggle
186          * @type jQuery
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          * @cat Effects
190          * @see slideDown(String|Number,Function)
191          * @see slideUp(String|Number,Function)
192          */
193         slideToggle: function(speed, callback){
194                 return this.animate({height: "toggle"}, speed, callback);
195         },
196         
197         /**
198          * Fade in all matched elements by adjusting their opacity and firing an
199          * optional callback after completion.
200          *
201          * Only the opacity is adjusted for this animation, meaning that
202          * all of the matched elements should already have some form of height
203          * and width associated with them.
204          *
205          * @example $("p").fadeIn("slow");
206          *
207          * @example $("p").fadeIn("slow",function(){
208          *   alert("Animation Done.");
209          * });
210          *
211          * @name fadeIn
212          * @type jQuery
213          * @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).
214          * @param Function callback (optional) A function to be executed whenever the animation completes.
215          * @cat Effects
216          * @see fadeOut(String|Number,Function)
217          * @see fadeTo(String|Number,Number,Function)
218          */
219         fadeIn: function(speed, callback){
220                 return this.animate({opacity: "show"}, speed, callback);
221         },
222         
223         /**
224          * Fade out all matched elements by adjusting their opacity and firing an
225          * optional callback after completion.
226          *
227          * Only the opacity is adjusted for this animation, meaning that
228          * all of the matched elements should already have some form of height
229          * and width associated with them.
230          *
231          * @example $("p").fadeOut("slow");
232          *
233          * @example $("p").fadeOut("slow",function(){
234          *   alert("Animation Done.");
235          * });
236          *
237          * @name fadeOut
238          * @type jQuery
239          * @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).
240          * @param Function callback (optional) A function to be executed whenever the animation completes.
241          * @cat Effects
242          * @see fadeIn(String|Number,Function)
243          * @see fadeTo(String|Number,Number,Function)
244          */
245         fadeOut: function(speed, callback){
246                 return this.animate({opacity: "hide"}, speed, callback);
247         },
248         
249         /**
250          * Fade the opacity of all matched elements to a specified opacity and firing an
251          * optional callback after completion.
252          *
253          * Only the opacity is adjusted for this animation, meaning that
254          * all of the matched elements should already have some form of height
255          * and width associated with them.
256          *
257          * @example $("p").fadeTo("slow", 0.5);
258          *
259          * @example $("p").fadeTo("slow", 0.5, function(){
260          *   alert("Animation Done.");
261          * });
262          *
263          * @name fadeTo
264          * @type jQuery
265          * @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).
266          * @param Number opacity The opacity to fade to (a number from 0 to 1).
267          * @param Function callback (optional) A function to be executed whenever the animation completes.
268          * @cat Effects
269          * @see fadeIn(String|Number,Function)
270          * @see fadeOut(String|Number,Function)
271          */
272         fadeTo: function(speed,to,callback){
273                 return this.animate({opacity: to}, speed, callback);
274         },
275         
276         /**
277          * A function for making your own, custom animations. The key aspect of
278          * this function is the object of style properties that will be animated,
279          * and to what end. Each key within the object represents a style property
280          * that will also be animated (for example: "height", "top", or "opacity").
281          *
282          * Note that properties should be specified using camel case
283          * eg. marginLeft instead of margin-left.
284          *
285          * The value associated with the key represents to what end the property
286          * will be animated. If a number is provided as the value, then the style
287          * property will be transitioned from its current state to that new number.
288          * Otherwise if the string "hide", "show", or "toggle" is provided, a default
289          * animation will be constructed for that property.
290          *
291          * @example $("p").animate({
292          *   height: 'toggle', opacity: 'toggle'
293          * }, "slow");
294          *
295          * @example $("p").animate({
296          *   left: 50, opacity: 'show'
297          * }, 500);
298          *
299          * @example $("p").animate({
300          *   opacity: 'show'
301          * }, "slow", "easein");
302          * @desc An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function (Only "swing" and "linear" are provided by default, with jQuery).
303          *
304          * @name animate
305          * @type jQuery
306          * @param Hash params A set of style attributes that you wish to animate, and to what end.
307          * @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).
308          * @param String easing (optional) The name of the easing effect that you want to use (e.g. "swing" or "linear"). Defaults to "swing".
309          * @param Function callback (optional) A function to be executed whenever the animation completes.
310          * @cat Effects
311          */
312         animate: function( prop, speed, easing, callback ) {
313                 return this.queue(function(){
314                         var hidden = jQuery(this).is(":hidden"),
315                                 opt = jQuery.speed(speed, easing, callback),
316                                 self = this;
317                         
318                         for ( var p in prop )
319                                 if ( prop[p] == "hide" && hidden || prop[p] == "show" && !hidden )
320                                         return jQuery.isFunction(opt.complete) && opt.complete.apply(this);
321
322                         this.curAnim = jQuery.extend({}, prop);
323                         
324                         jQuery.each( prop, function(name, val){
325                                 var e = new jQuery.fx( self, opt, name );
326                                 if ( val.constructor == Number )
327                                         e.custom( e.cur(), val );
328                                 else
329                                         e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop );
330                         });
331                 });
332         },
333         
334         /**
335          *
336          * @private
337          */
338         queue: function(type,fn){
339                 if ( !fn ) {
340                         fn = type;
341                         type = "fx";
342                 }
343         
344                 return this.each(function(){
345                         if ( !this.queue )
346                                 this.queue = {};
347         
348                         if ( !this.queue[type] )
349                                 this.queue[type] = [];
350         
351                         this.queue[type].push( fn );
352                 
353                         if ( this.queue[type].length == 1 )
354                                 fn.apply(this);
355                 });
356         }
357
358 });
359
360 jQuery.extend({
361         
362         speed: function(speed, easing, fn) {
363                 var opt = speed && speed.constructor == Object ? speed : {
364                         complete: fn || !fn && easing || 
365                                 jQuery.isFunction( speed ) && speed,
366                         duration: speed,
367                         easing: fn && easing || easing && easing.constructor != Function && easing || (jQuery.easing.swing ? "swing" : "linear")
368                 };
369
370                 opt.duration = (opt.duration && opt.duration.constructor == Number ? 
371                         opt.duration : 
372                         { slow: 600, fast: 200 }[opt.duration]) || 400;
373         
374                 // Queueing
375                 opt.old = opt.complete;
376                 opt.complete = function(){
377                         jQuery.dequeue(this, "fx");
378                         if ( jQuery.isFunction( opt.old ) )
379                                 opt.old.apply( this );
380                 };
381         
382                 return opt;
383         },
384         
385         easing: {
386                 linear: function( p, n, firstNum, diff ) {
387                         return firstNum + diff * p;
388                 },
389                 swing: function( p, n, firstNum, diff ) {
390                         return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
391                 }
392         },
393         
394         queue: {},
395         
396         dequeue: function(elem,type){
397                 type = type || "fx";
398         
399                 if ( elem.queue && elem.queue[type] ) {
400                         // Remove self
401                         elem.queue[type].shift();
402         
403                         // Get next function
404                         var f = elem.queue[type][0];
405                 
406                         if ( f ) f.apply( elem );
407                 }
408         },
409
410         timers: [],
411
412         /*
413          * I originally wrote fx() as a clone of moo.fx and in the process
414          * of making it small in size the code became illegible to sane
415          * people. You've been warned.
416          */
417         
418         fx: function( elem, options, prop ){
419
420                 var z = this;
421
422                 // The styles
423                 var y = elem.style;
424                 
425                 if ( prop == "height" || prop == "width" ) {
426                         // Store display property
427                         var oldDisplay = jQuery.css(elem, "display");
428
429                         // Make sure that nothing sneaks out
430                         var oldOverflow = y.overflow;
431                         y.overflow = "hidden";
432                 }
433
434                 // Simple function for setting a style value
435                 z.a = function(){
436                         if ( options.step )
437                                 options.step.apply( elem, [ z.now ] );
438
439                         if ( prop == "opacity" )
440                                 jQuery.attr(y, "opacity", z.now); // Let attr handle opacity
441                         else {
442                                 y[prop] = parseInt(z.now) + "px";
443                                 y.display = "block"; // Set display property to block for animation
444                         }
445                 };
446
447                 // Figure out the maximum number to run to
448                 z.max = function(){
449                         return parseFloat( jQuery.css(elem,prop) );
450                 };
451
452                 // Get the current size
453                 z.cur = function(){
454                         var r = parseFloat( jQuery.curCSS(elem, prop) );
455                         return r && r > -10000 ? r : z.max();
456                 };
457
458                 // Start an animation from one number to another
459                 z.custom = function(from,to){
460                         z.startTime = (new Date()).getTime();
461                         z.now = from;
462                         z.a();
463
464                         jQuery.timers.push(function(){
465                                 return z.step(from, to);
466                         });
467
468                         if ( jQuery.timers.length == 1 ) {
469                                 var timer = setInterval(function(){
470                                         var timers = jQuery.timers;
471                                         
472                                         for ( var i = 0; i < timers.length; i++ )
473                                                 if ( !timers[i]() )
474                                                         timers.splice(i--, 1);
475
476                                         if ( !timers.length )
477                                                 clearInterval( timer );
478                                 }, 13);
479                         }
480                 };
481
482                 // Simple 'show' function
483                 z.show = function(){
484                         if ( !elem.orig ) elem.orig = {};
485
486                         // Remember where we started, so that we can go back to it later
487                         elem.orig[prop] = jQuery.attr( elem.style, prop );
488
489                         options.show = true;
490
491                         // Begin the animation
492                         z.custom(0, this.cur());
493
494                         // Make sure that we start at a small width/height to avoid any
495                         // flash of content
496                         if ( prop != "opacity" )
497                                 y[prop] = "1px";
498                         
499                         // Start by showing the element
500                         jQuery(elem).show();
501                 };
502
503                 // Simple 'hide' function
504                 z.hide = function(){
505                         if ( !elem.orig ) elem.orig = {};
506
507                         // Remember where we started, so that we can go back to it later
508                         elem.orig[prop] = jQuery.attr( elem.style, prop );
509
510                         options.hide = true;
511
512                         // Begin the animation
513                         z.custom(this.cur(), 0);
514                 };
515
516                 // Each step of an animation
517                 z.step = function(firstNum, lastNum){
518                         var t = (new Date()).getTime();
519
520                         if (t > options.duration + z.startTime) {
521                                 z.now = lastNum;
522                                 z.a();
523
524                                 if (elem.curAnim) elem.curAnim[ prop ] = true;
525
526                                 var done = true;
527                                 for ( var i in elem.curAnim )
528                                         if ( elem.curAnim[i] !== true )
529                                                 done = false;
530
531                                 if ( done ) {
532                                         if ( oldDisplay != null ) {
533                                                 // Reset the overflow
534                                                 y.overflow = oldOverflow;
535                                         
536                                                 // Reset the display
537                                                 y.display = oldDisplay;
538                                                 if ( jQuery.css(elem, "display") == "none" )
539                                                         y.display = "block";
540                                         }
541
542                                         // Hide the element if the "hide" operation was done
543                                         if ( options.hide )
544                                                 y.display = "none";
545
546                                         // Reset the properties, if the item has been hidden or shown
547                                         if ( options.hide || options.show )
548                                                 for ( var p in elem.curAnim )
549                                                         jQuery.attr(y, p, elem.orig[p]);
550                                 }
551
552                                 // If a callback was provided, execute it
553                                 if ( done && jQuery.isFunction( options.complete ) )
554                                         // Execute the complete function
555                                         options.complete.apply( elem );
556
557                                 return false;
558                         } else {
559                                 var n = t - this.startTime;
560                                 // Figure out where in the animation we are and set the number
561                                 var p = n / options.duration;
562                                 
563                                 // Perform the easing function, defaults to swing
564                                 z.now = jQuery.easing[options.easing](p, n, firstNum, (lastNum-firstNum), options.duration);
565
566                                 // Perform the next step of the animation
567                                 z.a();
568                         }
569
570                         return true;
571                 };
572         
573         }
574 });