Added support for .contents(). Returns ALL child nodes for an element - except for...
[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                                 if ( p == "height" || p == "width" ) {
323                                         // Store display property
324                                         opt.display = jQuery.css(this, "display");
325
326                                         // Make sure that nothing sneaks out
327                                         opt.overflow = this.style.overflow;
328                                 }
329                         }
330
331                         if ( opt.overflow != null )
332                                 this.style.overflow = "hidden";
333
334                         this.curAnim = jQuery.extend({}, prop);
335                         
336                         jQuery.each( prop, function(name, val){
337                                 var e = new jQuery.fx( self, opt, name );
338                                 if ( val.constructor == Number )
339                                         e.custom( e.cur() || 0, val );
340                                 else
341                                         e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop );
342                         });
343
344                         // For JS strict compliance
345                         return true;
346                 });
347         },
348         
349         /**
350          *
351          * @private
352          */
353         queue: function(type,fn){
354                 if ( !fn ) {
355                         fn = type;
356                         type = "fx";
357                 }
358         
359                 return this.each(function(){
360                         if ( !this.queue )
361                                 this.queue = {};
362         
363                         if ( !this.queue[type] )
364                                 this.queue[type] = [];
365         
366                         this.queue[type].push( fn );
367                 
368                         if ( this.queue[type].length == 1 )
369                                 fn.apply(this);
370                 });
371         }
372
373 });
374
375 jQuery.extend({
376         
377         speed: function(speed, easing, fn) {
378                 var opt = speed && speed.constructor == Object ? speed : {
379                         complete: fn || !fn && easing || 
380                                 jQuery.isFunction( speed ) && speed,
381                         duration: speed,
382                         easing: fn && easing || easing && easing.constructor != Function && easing
383                 };
384
385                 opt.duration = (opt.duration && opt.duration.constructor == Number ? 
386                         opt.duration : 
387                         { slow: 600, fast: 200 }[opt.duration]) || 400;
388         
389                 // Queueing
390                 opt.old = opt.complete;
391                 opt.complete = function(){
392                         jQuery.dequeue(this, "fx");
393                         if ( jQuery.isFunction( opt.old ) )
394                                 opt.old.apply( this );
395                 };
396         
397                 return opt;
398         },
399         
400         easing: {
401                 linear: function( p, n, firstNum, diff ) {
402                         return firstNum + diff * p;
403                 },
404                 swing: function( p, n, firstNum, diff ) {
405                         return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
406                 }
407         },
408         
409         queue: {},
410         
411         dequeue: function(elem,type){
412                 type = type || "fx";
413         
414                 if ( elem.queue && elem.queue[type] ) {
415                         // Remove self
416                         elem.queue[type].shift();
417         
418                         // Get next function
419                         var f = elem.queue[type][0];
420                 
421                         if ( f ) f.apply( elem );
422                 }
423         },
424
425         timers: [],
426
427         fx: function( elem, options, prop ){
428
429                 var z = this, y = elem.style,
430                         isprop = elem[prop] != null && y[prop] == null;
431                 
432                 // Simple function for setting a style value
433                 z.a = function(){
434                         if ( options.step )
435                                 options.step.apply( elem, [ z.now ] );
436
437                         if ( prop == "opacity" )
438                                 jQuery.attr(y, "opacity", z.now); // Let attr handle opacity
439                         else {
440                                 if ( isprop )
441                                         elem[prop] = parseInt(z.now);
442                                 else
443                                         y[prop] = parseInt(z.now) + "px";
444
445                                 // Set display property to block for height/width animations
446                                 if ( prop == "height" || prop == "width" )
447                                         y.display = "block";
448                         }
449                 };
450
451                 // Figure out the maximum number to run to
452                 z.max = function(){
453                         return parseFloat( jQuery.css(elem,prop) );
454                 };
455
456                 // Get the current size
457                 z.cur = function(){
458                         if ( isprop ) return elem[prop];
459                         var r = parseFloat( jQuery.curCSS(elem, prop) );
460                         return r && r > -10000 ? r : z.max();
461                 };
462
463                 // Start an animation from one number to another
464                 z.custom = function(from,to){
465                         z.startTime = (new Date()).getTime();
466                         z.now = from;
467                         z.a();
468
469                         jQuery.timers.push(function(){
470                                 return z.step(from, to);
471                         });
472
473                         if ( jQuery.timers.length == 1 ) {
474                                 var timer = setInterval(function(){
475                                         var timers = jQuery.timers;
476                                         
477                                         for ( var i = 0; i < timers.length; i++ )
478                                                 if ( !timers[i]() )
479                                                         timers.splice(i--, 1);
480
481                                         if ( !timers.length )
482                                                 clearInterval( timer );
483                                 }, 13);
484                         }
485                 };
486
487                 // Simple 'show' function
488                 z.show = function(){
489                         if ( !elem.orig ) elem.orig = {};
490
491                         // Remember where we started, so that we can go back to it later
492                         elem.orig[prop] = jQuery.attr( elem.style, prop );
493
494                         options.show = true;
495
496                         // Begin the animation
497                         z.custom(0, this.cur());
498
499                         // Make sure that we start at a small width/height to avoid any
500                         // flash of content
501                         if ( prop != "opacity" )
502                                 y[prop] = "1px";
503                         
504                         // Start by showing the element
505                         jQuery(elem).show();
506                 };
507
508                 // Simple 'hide' function
509                 z.hide = function(){
510                         if ( !elem.orig ) elem.orig = {};
511
512                         // Remember where we started, so that we can go back to it later
513                         elem.orig[prop] = jQuery.attr( elem.style, prop );
514
515                         options.hide = true;
516
517                         // Begin the animation
518                         z.custom(this.cur(), 0);
519                 };
520
521                 // Each step of an animation
522                 z.step = function(firstNum, lastNum){
523                         var t = (new Date()).getTime();
524
525                         if (t > options.duration + z.startTime) {
526                                 z.now = lastNum;
527                                 z.a();
528
529                                 if (elem.curAnim) elem.curAnim[ prop ] = true;
530
531                                 var done = true;
532                                 for ( var i in elem.curAnim )
533                                         if ( elem.curAnim[i] !== true )
534                                                 done = false;
535
536                                 if ( done ) {
537                                         if ( options.display != null ) {
538                                                 // Reset the overflow
539                                                 y.overflow = options.overflow;
540                                         
541                                                 // Reset the display
542                                                 y.display = options.display;
543                                                 if ( jQuery.css(elem, "display") == "none" )
544                                                         y.display = "block";
545                                         }
546
547                                         // Hide the element if the "hide" operation was done
548                                         if ( options.hide )
549                                                 y.display = "none";
550
551                                         // Reset the properties, if the item has been hidden or shown
552                                         if ( options.hide || options.show )
553                                                 for ( var p in elem.curAnim )
554                                                         jQuery.attr(y, p, elem.orig[p]);
555                                 }
556
557                                 // If a callback was provided, execute it
558                                 if ( done && jQuery.isFunction( options.complete ) )
559                                         // Execute the complete function
560                                         options.complete.apply( elem );
561
562                                 return false;
563                         } else {
564                                 var n = t - this.startTime;
565                                 // Figure out where in the animation we are and set the number
566                                 var p = n / options.duration;
567                                 
568                                 // Perform the easing function, defaults to swing
569                                 z.now = jQuery.easing[options.easing || (jQuery.easing.swing ? "swing" : "linear")](p, n, firstNum, (lastNum-firstNum), options.duration);
570
571                                 // Perform the next step of the animation
572                                 z.a();
573                         }
574
575                         return true;
576                 };
577         
578         }
579 });