Tagging the 1.2.4 release.
[jquery.git] / src / fx.js
1 jQuery.fn.extend({
2         show: function(speed,callback){
3                 return speed ?
4                         this.animate({
5                                 height: "show", width: "show", opacity: "show"
6                         }, speed, callback) :
7
8                         this.filter(":hidden").each(function(){
9                                 this.style.display = this.oldblock || "";
10                                 if ( jQuery.css(this,"display") == "none" ) {
11                                         var elem = jQuery("<" + this.tagName + " />").appendTo("body");
12                                         this.style.display = elem.css("display");
13                                         // handle an edge condition where css is - div { display:none; } or similar
14                                         if (this.style.display == "none")
15                                                 this.style.display = "block";
16                                         elem.remove();
17                                 }
18                         }).end();
19         },
20
21         hide: function(speed,callback){
22                 return speed ?
23                         this.animate({
24                                 height: "hide", width: "hide", opacity: "hide"
25                         }, speed, callback) :
26
27                         this.filter(":visible").each(function(){
28                                 this.oldblock = this.oldblock || jQuery.css(this,"display");
29                                 this.style.display = "none";
30                         }).end();
31         },
32
33         // Save the old toggle function
34         _toggle: jQuery.fn.toggle,
35
36         toggle: function( fn, fn2 ){
37                 return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ?
38                         this._toggle.apply( this, arguments ) :
39                         fn ?
40                                 this.animate({
41                                         height: "toggle", width: "toggle", opacity: "toggle"
42                                 }, fn, fn2) :
43                                 this.each(function(){
44                                         jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();
45                                 });
46         },
47
48         slideDown: function(speed,callback){
49                 return this.animate({height: "show"}, speed, callback);
50         },
51
52         slideUp: function(speed,callback){
53                 return this.animate({height: "hide"}, speed, callback);
54         },
55
56         slideToggle: function(speed, callback){
57                 return this.animate({height: "toggle"}, speed, callback);
58         },
59
60         fadeIn: function(speed, callback){
61                 return this.animate({opacity: "show"}, speed, callback);
62         },
63
64         fadeOut: function(speed, callback){
65                 return this.animate({opacity: "hide"}, speed, callback);
66         },
67
68         fadeTo: function(speed,to,callback){
69                 return this.animate({opacity: to}, speed, callback);
70         },
71
72         animate: function( prop, speed, easing, callback ) {
73                 var optall = jQuery.speed(speed, easing, callback);
74
75                 return this[ optall.queue === false ? "each" : "queue" ](function(){
76                         if ( this.nodeType != 1)
77                                 return false;
78
79                         var opt = jQuery.extend({}, optall), p,
80                                 hidden = jQuery(this).is(":hidden"), self = this;
81
82                         for ( p in prop ) {
83                                 if ( prop[p] == "hide" && hidden || prop[p] == "show" && !hidden )
84                                         return opt.complete.call(this);
85
86                                 if ( p == "height" || p == "width" ) {
87                                         // Store display property
88                                         opt.display = jQuery.css(this, "display");
89
90                                         // Make sure that nothing sneaks out
91                                         opt.overflow = this.style.overflow;
92                                 }
93                         }
94
95                         if ( opt.overflow != null )
96                                 this.style.overflow = "hidden";
97
98                         opt.curAnim = jQuery.extend({}, prop);
99
100                         jQuery.each( prop, function(name, val){
101                                 var e = new jQuery.fx( self, opt, name );
102
103                                 if ( /toggle|show|hide/.test(val) )
104                                         e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop );
105                                 else {
106                                         var parts = val.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/),
107                                                 start = e.cur(true) || 0;
108
109                                         if ( parts ) {
110                                                 var end = parseFloat(parts[2]),
111                                                         unit = parts[3] || "px";
112
113                                                 // We need to compute starting value
114                                                 if ( unit != "px" ) {
115                                                         self.style[ name ] = (end || 1) + unit;
116                                                         start = ((end || 1) / e.cur(true)) * start;
117                                                         self.style[ name ] = start + unit;
118                                                 }
119
120                                                 // If a +=/-= token was provided, we're doing a relative animation
121                                                 if ( parts[1] )
122                                                         end = ((parts[1] == "-=" ? -1 : 1) * end) + start;
123
124                                                 e.custom( start, end, unit );
125                                         } else
126                                                 e.custom( start, val, "" );
127                                 }
128                         });
129
130                         // For JS strict compliance
131                         return true;
132                 });
133         },
134
135         queue: function(type, fn){
136                 if ( jQuery.isFunction(type) || ( type && type.constructor == Array )) {
137                         fn = type;
138                         type = "fx";
139                 }
140
141                 if ( !type || (typeof type == "string" && !fn) )
142                         return queue( this[0], type );
143
144                 return this.each(function(){
145                         if ( fn.constructor == Array )
146                                 queue(this, type, fn);
147                         else {
148                                 queue(this, type).push( fn );
149
150                                 if ( queue(this, type).length == 1 )
151                                         fn.call(this);
152                         }
153                 });
154         },
155
156         stop: function(clearQueue, gotoEnd){
157                 var timers = jQuery.timers;
158
159                 if (clearQueue)
160                         this.queue([]);
161
162                 this.each(function(){
163                         // go in reverse order so anything added to the queue during the loop is ignored
164                         for ( var i = timers.length - 1; i >= 0; i-- )
165                                 if ( timers[i].elem == this ) {
166                                         if (gotoEnd)
167                                                 // force the next step to be the last
168                                                 timers[i](true);
169                                         timers.splice(i, 1);
170                                 }
171                 });
172
173                 // start the next in the queue if the last step wasn't forced
174                 if (!gotoEnd)
175                         this.dequeue();
176
177                 return this;
178         }
179
180 });
181
182 var queue = function( elem, type, array ) {
183         if ( elem ){
184
185                 type = type || "fx";
186
187                 var q = jQuery.data( elem, type + "queue" );
188
189                 if ( !q || array )
190                         q = jQuery.data( elem, type + "queue", jQuery.makeArray(array) );
191
192         }
193         return q;
194 };
195
196 jQuery.fn.dequeue = function(type){
197         type = type || "fx";
198
199         return this.each(function(){
200                 var q = queue(this, type);
201
202                 q.shift();
203
204                 if ( q.length )
205                         q[0].call( this );
206         });
207 };
208
209 jQuery.extend({
210
211         speed: function(speed, easing, fn) {
212                 var opt = speed && speed.constructor == Object ? speed : {
213                         complete: fn || !fn && easing ||
214                                 jQuery.isFunction( speed ) && speed,
215                         duration: speed,
216                         easing: fn && easing || easing && easing.constructor != Function && easing
217                 };
218
219                 opt.duration = (opt.duration && opt.duration.constructor == Number ?
220                         opt.duration :
221                         jQuery.fx.speeds[opt.duration]) || jQuery.fx.speeds.def;
222
223                 // Queueing
224                 opt.old = opt.complete;
225                 opt.complete = function(){
226                         if ( opt.queue !== false )
227                                 jQuery(this).dequeue();
228                         if ( jQuery.isFunction( opt.old ) )
229                                 opt.old.call( this );
230                 };
231
232                 return opt;
233         },
234
235         easing: {
236                 linear: function( p, n, firstNum, diff ) {
237                         return firstNum + diff * p;
238                 },
239                 swing: function( p, n, firstNum, diff ) {
240                         return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
241                 }
242         },
243
244         timers: [],
245         timerId: null,
246
247         fx: function( elem, options, prop ){
248                 this.options = options;
249                 this.elem = elem;
250                 this.prop = prop;
251
252                 if ( !options.orig )
253                         options.orig = {};
254         }
255
256 });
257
258 jQuery.fx.prototype = {
259
260         // Simple function for setting a style value
261         update: function(){
262                 if ( this.options.step )
263                         this.options.step.call( this.elem, this.now, this );
264
265                 (jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );
266
267                 // Set display property to block for height/width animations
268                 if ( this.prop == "height" || this.prop == "width" )
269                         this.elem.style.display = "block";
270         },
271
272         // Get the current size
273         cur: function(force){
274                 if ( this.elem[this.prop] != null && this.elem.style[this.prop] == null )
275                         return this.elem[ this.prop ];
276
277                 var r = parseFloat(jQuery.css(this.elem, this.prop, force));
278                 return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, this.prop)) || 0;
279         },
280
281         // Start an animation from one number to another
282         custom: function(from, to, unit){
283                 this.startTime = now();
284                 this.start = from;
285                 this.end = to;
286                 this.unit = unit || this.unit || "px";
287                 this.now = this.start;
288                 this.pos = this.state = 0;
289                 this.update();
290
291                 var self = this;
292                 function t(gotoEnd){
293                         return self.step(gotoEnd);
294                 }
295
296                 t.elem = this.elem;
297
298                 jQuery.timers.push(t);
299
300                 if ( jQuery.timerId == null ) {
301                         jQuery.timerId = setInterval(function(){
302                                 var timers = jQuery.timers;
303
304                                 for ( var i = 0; i < timers.length; i++ )
305                                         if ( !timers[i]() )
306                                                 timers.splice(i--, 1);
307
308                                 if ( !timers.length ) {
309                                         clearInterval( jQuery.timerId );
310                                         jQuery.timerId = null;
311                                 }
312                         }, 13);
313                 }
314         },
315
316         // Simple 'show' function
317         show: function(){
318                 // Remember where we started, so that we can go back to it later
319                 this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop );
320                 this.options.show = true;
321
322                 // Begin the animation
323                 this.custom(0, this.cur());
324
325                 // Make sure that we start at a small width/height to avoid any
326                 // flash of content
327                 if ( this.prop == "width" || this.prop == "height" )
328                         this.elem.style[this.prop] = "1px";
329
330                 // Start by showing the element
331                 jQuery(this.elem).show();
332         },
333
334         // Simple 'hide' function
335         hide: function(){
336                 // Remember where we started, so that we can go back to it later
337                 this.options.orig[this.prop] = jQuery.attr( this.elem.style, this.prop );
338                 this.options.hide = true;
339
340                 // Begin the animation
341                 this.custom(this.cur(), 0);
342         },
343
344         // Each step of an animation
345         step: function(gotoEnd){
346                 var t = now();
347
348                 if ( gotoEnd || t > this.options.duration + this.startTime ) {
349                         this.now = this.end;
350                         this.pos = this.state = 1;
351                         this.update();
352
353                         this.options.curAnim[ this.prop ] = true;
354
355                         var done = true;
356                         for ( var i in this.options.curAnim )
357                                 if ( this.options.curAnim[i] !== true )
358                                         done = false;
359
360                         if ( done ) {
361                                 if ( this.options.display != null ) {
362                                         // Reset the overflow
363                                         this.elem.style.overflow = this.options.overflow;
364
365                                         // Reset the display
366                                         this.elem.style.display = this.options.display;
367                                         if ( jQuery.css(this.elem, "display") == "none" )
368                                                 this.elem.style.display = "block";
369                                 }
370
371                                 // Hide the element if the "hide" operation was done
372                                 if ( this.options.hide )
373                                         this.elem.style.display = "none";
374
375                                 // Reset the properties, if the item has been hidden or shown
376                                 if ( this.options.hide || this.options.show )
377                                         for ( var p in this.options.curAnim )
378                                                 jQuery.attr(this.elem.style, p, this.options.orig[p]);
379                         }
380
381                         if ( done )
382                                 // Execute the complete function
383                                 this.options.complete.call( this.elem );
384
385                         return false;
386                 } else {
387                         var n = t - this.startTime;
388                         this.state = n / this.options.duration;
389
390                         // Perform the easing function, defaults to swing
391                         this.pos = jQuery.easing[this.options.easing || (jQuery.easing.swing ? "swing" : "linear")](this.state, n, 0, 1, this.options.duration);
392                         this.now = this.start + ((this.end - this.start) * this.pos);
393
394                         // Perform the next step of the animation
395                         this.update();
396                 }
397
398                 return true;
399         }
400
401 };
402
403 jQuery.extend( jQuery.fx, {
404         speeds:{
405                 slow: 600,
406                 fast: 200,
407                 // Default speed
408                 def: 400
409         },
410         step: {
411                 scrollLeft: function(fx){
412                         fx.elem.scrollLeft = fx.now;
413                 },
414
415                 scrollTop: function(fx){
416                         fx.elem.scrollTop = fx.now;
417                 },
418
419                 opacity: function(fx){
420                         jQuery.attr(fx.elem.style, "opacity", fx.now);
421                 },
422
423                 _default: function(fx){
424                         fx.elem.style[ fx.prop ] = fx.now + fx.unit;
425                 }
426         }
427 });