4 * Displays each of the set of matched elements if they are hidden.
6 * @example $("p").show()
7 * @before <p style="display: none">Hello</p>
8 * @result [ <p style="display: block">Hello</p> ]
16 * Show all matched elements using a graceful animation and firing an
17 * optional callback after completion.
19 * The height, width, and opacity of each of the matched elements
20 * are changed dynamically according to the specified speed.
22 * @example $("p").show("slow");
24 * @example $("p").show("slow",function(){
25 * alert("Animation Done.");
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.
33 * @see hide(String|Number,Function)
35 show: function(speed,callback){
38 height: "show", width: "show", opacity: "show"
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";
49 * Hides each of the set of matched elements if they are shown.
51 * @example $("p").hide()
52 * @before <p>Hello</p>
53 * @result [ <p style="display: none">Hello</p> ]
61 * Hide all matched elements using a graceful animation and firing an
62 * optional callback after completion.
64 * The height, width, and opacity of each of the matched elements
65 * are changed dynamically according to the specified speed.
67 * @example $("p").hide("slow");
69 * @example $("p").hide("slow",function(){
70 * alert("Animation Done.");
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.
78 * @see show(String|Number,Function)
80 hide: function(speed,callback){
83 height: "hide", width: "hide", opacity: "hide"
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";
94 // Save the old toggle function
95 _toggle: jQuery.fn.toggle,
98 * Toggles each of the set of matched elements. If they are shown,
99 * toggle makes them hidden. If they are hidden, toggle
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> ]
110 toggle: function( fn, fn2 ){
111 return jQuery.isFunction(fn) && jQuery.isFunction(fn2) ?
112 this._toggle( fn, fn2 ) :
115 height: "toggle", width: "toggle", opacity: "toggle"
117 this.each(function(){
118 jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();
123 * Reveal all matched elements by adjusting their height and firing an
124 * optional callback after completion.
126 * Only the height is adjusted for this animation, causing all matched
127 * elements to be revealed in a "sliding" manner.
129 * @example $("p").slideDown("slow");
131 * @example $("p").slideDown("slow",function(){
132 * alert("Animation Done.");
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.
140 * @see slideUp(String|Number,Function)
141 * @see slideToggle(String|Number,Function)
143 slideDown: function(speed,callback){
144 return this.animate({height: "show"}, speed, callback);
148 * Hide all matched elements by adjusting their height and firing an
149 * optional callback after completion.
151 * Only the height is adjusted for this animation, causing all matched
152 * elements to be hidden in a "sliding" manner.
154 * @example $("p").slideUp("slow");
156 * @example $("p").slideUp("slow",function(){
157 * alert("Animation Done.");
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.
165 * @see slideDown(String|Number,Function)
166 * @see slideToggle(String|Number,Function)
168 slideUp: function(speed,callback){
169 return this.animate({height: "hide"}, speed, callback);
173 * Toggle the visibility of all matched elements by adjusting their height and firing an
174 * optional callback after completion.
176 * Only the height is adjusted for this animation, causing all matched
177 * elements to be hidden in a "sliding" manner.
179 * @example $("p").slideToggle("slow");
181 * @example $("p").slideToggle("slow",function(){
182 * alert("Animation Done.");
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.
190 * @see slideDown(String|Number,Function)
191 * @see slideUp(String|Number,Function)
193 slideToggle: function(speed, callback){
194 return this.animate({height: "toggle"}, speed, callback);
198 * Fade in all matched elements by adjusting their opacity and firing an
199 * optional callback after completion.
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.
205 * @example $("p").fadeIn("slow");
207 * @example $("p").fadeIn("slow",function(){
208 * alert("Animation Done.");
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.
216 * @see fadeOut(String|Number,Function)
217 * @see fadeTo(String|Number,Number,Function)
219 fadeIn: function(speed, callback){
220 return this.animate({opacity: "show"}, speed, callback);
224 * Fade out all matched elements by adjusting their opacity and firing an
225 * optional callback after completion.
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.
231 * @example $("p").fadeOut("slow");
233 * @example $("p").fadeOut("slow",function(){
234 * alert("Animation Done.");
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.
242 * @see fadeIn(String|Number,Function)
243 * @see fadeTo(String|Number,Number,Function)
245 fadeOut: function(speed, callback){
246 return this.animate({opacity: "hide"}, speed, callback);
250 * Fade the opacity of all matched elements to a specified opacity and firing an
251 * optional callback after completion.
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.
257 * @example $("p").fadeTo("slow", 0.5);
259 * @example $("p").fadeTo("slow", 0.5, function(){
260 * alert("Animation Done.");
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.
269 * @see fadeIn(String|Number,Function)
270 * @see fadeOut(String|Number,Function)
272 fadeTo: function(speed,to,callback){
273 return this.animate({opacity: to}, speed, callback);
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").
282 * Note that properties should be specified using camel case
283 * eg. marginLeft instead of margin-left.
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.
291 * @example $("p").animate({
292 * height: 'toggle', opacity: 'toggle'
295 * @example $("p").animate({
296 * left: 50, opacity: 'show'
299 * @example $("p").animate({
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).
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.
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),
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);
322 this.curAnim = jQuery.extend({}, prop);
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 );
329 e[ val == "toggle" ? hidden ? "show" : "hide" : val ]( prop );
338 queue: function(type,fn){
344 return this.each(function(){
348 if ( !this.queue[type] )
349 this.queue[type] = [];
351 this.queue[type].push( fn );
353 if ( this.queue[type].length == 1 )
362 speed: function(speed, easing, fn) {
363 var opt = speed && speed.constructor == Object ? speed : {
364 complete: fn || !fn && easing ||
365 jQuery.isFunction( speed ) && speed,
367 easing: fn && easing || easing && easing.constructor != Function && easing || (jQuery.easing.swing ? "swing" : "linear")
370 opt.duration = (opt.duration && opt.duration.constructor == Number ?
372 { slow: 600, fast: 200 }[opt.duration]) || 400;
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 );
386 linear: function( p, n, firstNum, diff ) {
387 return firstNum + diff * p;
389 swing: function( p, n, firstNum, diff ) {
390 return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
396 dequeue: function(elem,type){
399 if ( elem.queue && elem.queue[type] ) {
401 elem.queue[type].shift();
404 var f = elem.queue[type][0];
406 if ( f ) f.apply( elem );
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.
418 fx: function( elem, options, prop ){
425 if ( prop == "height" || prop == "width" ) {
426 // Store display property
427 var oldDisplay = jQuery.css(elem, "display");
429 // Make sure that nothing sneaks out
430 var oldOverflow = y.overflow;
431 y.overflow = "hidden";
434 // Simple function for setting a style value
437 options.step.apply( elem, [ z.now ] );
439 if ( prop == "opacity" )
440 jQuery.attr(y, "opacity", z.now); // Let attr handle opacity
442 y[prop] = parseInt(z.now) + "px";
443 y.display = "block"; // Set display property to block for animation
447 // Figure out the maximum number to run to
449 return parseFloat( jQuery.css(elem,prop) );
452 // Get the current size
454 var r = parseFloat( jQuery.curCSS(elem, prop) );
455 return r && r > -10000 ? r : z.max();
458 // Start an animation from one number to another
459 z.custom = function(from,to){
460 z.startTime = (new Date()).getTime();
464 jQuery.timers.push(function(){
465 return z.step(from, to);
468 if ( jQuery.timers.length == 1 ) {
469 var timer = setInterval(function(){
470 var timers = jQuery.timers;
472 for ( var i = 0; i < timers.length; i++ )
474 timers.splice(i--, 1);
476 if ( !timers.length )
477 clearInterval( timer );
482 // Simple 'show' function
484 if ( !elem.orig ) elem.orig = {};
486 // Remember where we started, so that we can go back to it later
487 elem.orig[prop] = jQuery.attr( elem.style, prop );
491 // Begin the animation
492 z.custom(0, this.cur());
494 // Make sure that we start at a small width/height to avoid any
496 if ( prop != "opacity" )
499 // Start by showing the element
503 // Simple 'hide' function
505 if ( !elem.orig ) elem.orig = {};
507 // Remember where we started, so that we can go back to it later
508 elem.orig[prop] = jQuery.attr( elem.style, prop );
512 // Begin the animation
513 z.custom(this.cur(), 0);
516 // Each step of an animation
517 z.step = function(firstNum, lastNum){
518 var t = (new Date()).getTime();
520 if (t > options.duration + z.startTime) {
524 if (elem.curAnim) elem.curAnim[ prop ] = true;
527 for ( var i in elem.curAnim )
528 if ( elem.curAnim[i] !== true )
532 if ( oldDisplay != null ) {
533 // Reset the overflow
534 y.overflow = oldOverflow;
537 y.display = oldDisplay;
538 if ( jQuery.css(elem, "display") == "none" )
542 // Hide the element if the "hide" operation was done
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]);
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 );
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;
563 // Perform the easing function, defaults to swing
564 z.now = jQuery.easing[options.easing](p, n, firstNum, (lastNum-firstNum), options.duration);
566 // Perform the next step of the animation