Fixed issue with hide() notn reverting back to the correct display type.
[jquery.git] / fx / fx.js
1 jQuery.fn.extend({
2
3         // overwrite the old show method
4         _show: jQuery.fn.show,
5         
6         /**
7          * The effects module overloads the show method to now allow 
8          * for a speed to the show operation. What actually happens is 
9          * that the height, width, and opacity to the matched elements 
10          * are changed dynamically. The only three current speeds are 
11          * "slow", "normal", and "fast". For example:
12          *   $("p").show("slow");
13          * Note: You should not run the show method on things 
14          * that are already shown. This can be circumvented by doing this:
15          *   $("p:hidden").show("slow");
16          */
17         show: function(speed,callback){
18                 return speed ? this.animate({
19                         height: "show", width: "show", opacity: "show"
20                 }, speed, callback) : this._show();
21         },
22         
23         // Overwrite the old hide method
24         _hide: jQuery.fn.hide,
25         
26         /**
27          * The hide function behaves very similary to the show function, 
28          * but is just the opposite.
29          *   $("p:visible").hide("slow");
30          */
31         hide: function(speed,callback){
32                 return speed ? this.animate({
33                         height: "hide", width: "hide", opacity: "hide"
34                 }, speed, callback) : this._hide();
35         },
36         
37         /**
38          * This function increases the height and opacity for all matched 
39          * elements. This is very similar to 'show', but does not change 
40          * the width - creating a neat sliding effect.
41          *   $("p:hidden").slideDown("slow");
42          */
43         slideDown: function(speed,callback){
44                 return this.animate({height: "show"}, speed, callback);
45         },
46         
47         /**
48          * Just like slideDown, only it hides all matched elements.
49          *   $("p:visible").slideUp("slow");
50          */
51         slideUp: function(speed,callback){
52                 return this.animate({height: "hide"}, speed, callback);
53         },
54         
55         /**
56          * Adjusts the opacity of all matched elements from a hidden, 
57          * to a fully visible, state.
58          *   $("p:hidden").fadeIn("slow");
59          */
60         fadeIn: function(speed,callback){
61                 return this.animate({opacity: "show"}, speed, callback);
62         },
63         
64         /**
65          * Same as fadeIn, but transitions from a visible, to a hidden state.
66          *   $("p:visible").fadeOut("slow");
67          */
68         fadeOut: function(speed,callback){
69                 return this.animate({opacity: "hide"}, speed, callback);
70         },
71         
72         /**
73          * ...
74          */
75         fadeTo: function(speed,to,callback){
76                 return this.animate({opacity: to}, speed, callback);
77         },
78         
79         /**
80          *
81          */
82         animate: function(prop,speed,callback) {
83                 return this.queue(function(){
84                         var i = 0;
85                         for ( var p in prop ) {
86                                 var e = new jQuery.fx( this, jQuery.speed(speed,callback,i++), p );
87                                 if ( prop[p].constructor == Number )
88                                         e.custom( e.cur(), prop[p] );
89                                 else
90                                         e[ prop[p] ]( prop );
91                         }
92                 });
93         },
94         
95         /**
96          *
97          * @private
98          */
99         queue: function(type,fn){
100                 if ( !fn ) {
101                         fn = type;
102                         type = "fx";
103                 }
104         
105                 return this.each(function(){
106                         if ( !this.queue )
107                                 this.queue = {};
108         
109                         if ( !this.queue[type] )
110                                 this.queue[type] = [];
111         
112                         this.queue[type].push( fn );
113                 
114                         if ( this.queue[type].length == 1 )
115                                 fn.apply(this);
116                 });
117         }
118
119 });
120
121 jQuery.extend({
122
123         setAuto: function(e,p) {
124                 if ( e.notAuto ) return;
125
126                 if ( p == "height" && e.scrollHeight != parseInt(jQuery.curCSS(e,p)) ) return;
127                 if ( p == "width" && e.scrollWidth != parseInt(jQuery.curCSS(e,p)) ) return;
128
129                 // Remember the original height
130                 var a = e.style[p];
131
132                 // Figure out the size of the height right now
133                 var o = jQuery.curCSS(e,p,1);
134
135                 if ( p == "height" && e.scrollHeight != o ||
136                         p == "width" && e.scrollWidth != o ) return;
137
138                 // Set the height to auto
139                 e.style[p] = e.currentStyle ? "" : "auto";
140
141                 // See what the size of "auto" is
142                 var n = jQuery.curCSS(e,p,1);
143
144                 // Revert back to the original size
145                 if ( o != n && n != "auto" ) {
146                         e.style[p] = a;
147                         e.notAuto = true;
148                 }
149         },
150         
151         speed: function(s,o,i) {
152                 o = o || {};
153                 
154                 if ( o.constructor == Function )
155                         o = { complete: o };
156                 
157                 var ss = { slow: 600, fast: 200 };
158                 o.duration = (s && s.constructor == Number ? s : ss[s]) || 400;
159         
160                 // Queueing
161                 o.oldComplete = o.complete;
162                 o.complete = function(){
163                         jQuery.dequeue(this, "fx");
164                         if ( o.oldComplete && o.oldComplete.constructor == Function )
165                                 o.oldComplete.apply( this );
166                 };
167                 
168                 if ( i > 0 )
169                         o.complete = null;
170         
171                 return o;
172         },
173         
174         queue: {},
175         
176         dequeue: function(elem,type){
177                 type = type || "fx";
178         
179                 if ( elem.queue && elem.queue[type] ) {
180                         // Remove self
181                         elem.queue[type].shift();
182         
183                         // Get next function
184                         var f = elem.queue[type][0];
185                 
186                         if ( f ) f.apply( elem );
187                 }
188         },
189
190         /*
191          * I originally wrote fx() as a clone of moo.fx and in the process
192          * of making it small in size the code became illegible to sane
193          * people. You've been warned.
194          */
195         
196         fx: function( elem, options, prop ){
197         
198                 var z = this;
199         
200                 // The users options
201                 z.o = {
202                         duration: options.duration || 400,
203                         complete: options.complete
204                 };
205         
206                 // The element
207                 z.el = elem;
208         
209                 // The styles
210                 var y = z.el.style;
211         
212                 // Simple function for setting a style value
213                 z.a = function(){
214                         if ( prop == "opacity" ) {
215                                 if (z.now == 1) z.now = 0.9999;
216                                 if (window.ActiveXObject)
217                                         y.filter = "alpha(opacity=" + z.now*100 + ")";
218                                 else
219                                         y.opacity = z.now;
220
221                         // My hate for IE will never die
222                         } else if ( parseInt(z.now) )
223                                 y[prop] = parseInt(z.now) + "px";
224                         y.display = "block";
225                 };
226         
227                 // Figure out the maximum number to run to
228                 z.max = function(){
229                         return parseFloat( jQuery.css(z.el,prop) );
230                 };
231         
232                 // Get the current size
233                 z.cur = function(){
234                         return parseFloat( jQuery.curCSS(z.el, prop) ) || z.max();
235                 };
236         
237                 // Start an animation from one number to another
238                 z.custom = function(from,to){
239                         z.startTime = (new Date()).getTime();
240                         z.now = from;
241                         z.a();
242         
243                         z.timer = setInterval(function(){
244                                 z.step(from, to);
245                         }, 13);
246                 };
247         
248                 // Simple 'show' function
249                 z.show = function( p ){
250                         if ( !z.el.orig ) z.el.orig = {};
251
252                         // Remember where we started, so that we can go back to it later
253                         z.el.orig[prop] = this.cur();
254
255                         z.custom( 0, z.el.orig[prop] );
256
257                         // Stupid IE, look what you made me do
258                         if ( prop != "opacity" )
259                                 y[prop] = "1px";
260                 };
261         
262                 // Simple 'hide' function
263                 z.hide = function(){
264                         if ( !z.el.orig ) z.el.orig = {};
265
266                         // Remember where we started, so that we can go back to it later
267                         z.el.orig[prop] = this.cur();
268
269                         z.o.hide = true;
270
271                         // Begin the animation
272                         z.custom(z.cur(),0);
273                 };
274         
275                 // IE has trouble with opacity if it does not have layout
276                 if ( jQuery.browser.msie && !z.el.currentStyle.hasLayout )
277                         y.zoom = "1";
278         
279                 // Remember  the overflow of the element
280                 if ( !z.el.oldOverlay )
281                         z.el.oldOverflow = jQuery.css( z.el, "overflow" );
282         
283                 // Make sure that nothing sneaks out
284                 if ( z.el.oldOverlay == "visible" )
285                         y.overflow = "hidden";
286         
287                 // Each step of an animation
288                 z.step = function(firstNum, lastNum){
289                         var t = (new Date()).getTime();
290         
291                         if (t > z.o.duration + z.startTime) {
292                                 // Stop the timer
293                                 clearInterval(z.timer);
294                                 z.timer = null;
295
296                                 z.now = lastNum;
297                                 z.a();
298
299                                 // Hide the element if the "hide" operation was done
300                                 if ( z.o.hide ) y.display = 'none';
301         
302                                 // Reset the overflow
303                                 y.overflow = z.el.oldOverflow;
304
305                                 // If a callback was provided, execute it
306                                 if( z.o.complete && z.o.complete.constructor == Function )
307                                         // Execute the complete function
308                                         z.o.complete.apply( z.el );
309
310                                 // Reset the property, if the item has been hidden
311                                 if ( z.o.hide )
312                                         y[ prop ] = z.el.orig[ prop ].constructor == Number && prop != "opacity" ?
313                                                 z.el.orig[prop] + "px" : z.el.orig[prop];
314
315                                 // set its height and/or width to auto
316                                 jQuery.setAuto( z.el, prop );
317                         } else {
318                                 // Figure out where in the animation we are and set the number
319                                 var p = (t - this.startTime) / z.o.duration;
320                                 z.now = ((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;
321         
322                                 // Perform the next step of the animation
323                                 z.a();
324                         }
325                 };
326         
327         }
328
329 });