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