src/fx/fx.js

   1 jQuery.fn.extend({
   2
   3         // overwrite the old show method
   4         _show: jQuery.fn.show,
   5
   6         /**
   7          * Show all matched elements using a graceful animation and firing an
   8          * optional callback after completion.
   9          *
  10          * The height, width, and opacity of each of the matched elements
  11          * are changed dynamically according to the specified speed.
  12          *
  13          * @example $("p").show("slow");
  14          *
  15          * @example $("p").show("slow",function(){
  16          *   alert("Animation Done.");
  17          * });
  18          *
  19          * @name show
  20          * @type jQuery
  21          * @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).
  22          * @param Function callback (optional) A function to be executed whenever the animation completes.
  23          * @param String easing (optional) easing effect
  24          * @cat Effects/Animations
  25          * @see hide(String|Number,Function)
  26          */
  27         show: function(speed,callback, easing){
  28                 return speed ? this.animate({
  29                         height: "show", width: "show", opacity: "show"
  30                 }, speed, callback, easing) : this._show();
  31         },
  32
  33         // Overwrite the old hide method
  34         _hide: jQuery.fn.hide,
  35
  36         /**
  37          * Hide all matched elements using a graceful animation and firing an
  38          * optional callback after completion.
  39          *
  40          * The height, width, and opacity of each of the matched elements
  41          * are changed dynamically according to the specified speed.
  42          *
  43          * @example $("p").hide("slow");
  44          *
  45          * @example $("p").hide("slow",function(){
  46          *   alert("Animation Done.");
  47          * });
  48          *
  49          * @name hide
  50          * @type jQuery
  51          * @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).
  52          * @param Function callback (optional) A function to be executed whenever the animation completes.
  53          * @param String easing (optional) easing effect
  54          * @cat Effects/Animations
  55          * @see show(String|Number,Function)
  56          */
  57         hide: function(speed,callback, easing){
  58                 return speed ? this.animate({
  59                         height: "hide", width: "hide", opacity: "hide"
  60                 }, speed, callback, easing) : this._hide();
  61         },
  62
  63         /**
  64          * Reveal all matched elements by adjusting their height and firing an
  65          * optional callback after completion.
  66          *
  67          * Only the height is adjusted for this animation, causing all matched
  68          * elements to be revealed in a "sliding" manner.
  69          *
  70          * @example $("p").slideDown("slow");
  71          *
  72          * @example $("p").slideDown("slow",function(){
  73          *   alert("Animation Done.");
  74          * });
  75          *
  76          * @name slideDown
  77          * @type jQuery
  78          * @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).
  79          * @param Function callback (optional) A function to be executed whenever the animation completes.
  80          * @param String easing (optional) easing effect
  81          * @cat Effects/Animations
  82          * @see slideUp(String|Number,Function)
  83          * @see slideToggle(String|Number,Function)
  84          */
  85         slideDown: function(speed,callback, easing){
  86                 return this.animate({height: "show"}, speed, callback, easing);
  87         },
  88
  89         /**
  90          * Hide all matched elements by adjusting their height and firing an
  91          * optional callback after completion.
  92          *
  93          * Only the height is adjusted for this animation, causing all matched
  94          * elements to be hidden in a "sliding" manner.
  95          *
  96          * @example $("p").slideUp("slow");
  97          *
  98          * @example $("p").slideUp("slow",function(){
  99          *   alert("Animation Done.");
 100          * });
 101          *
 102          * @name slideUp
 103          * @type jQuery
 104          * @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).
 105          * @param Function callback (optional) A function to be executed whenever the animation completes.
 106          * @param String easing (optional) easing effect
 107          * @cat Effects/Animations
 108          * @see slideDown(String|Number,Function)
 109          * @see slideToggle(String|Number,Function)
 110          */
 111         slideUp: function(speed,callback, easing){
 112                 return this.animate({height: "hide"}, speed, callback, easing);
 113         },
 114
 115         /**
 116          * Toggle the visibility of all matched elements by adjusting their height and firing an
 117          * optional callback after completion.
 118          *
 119          * Only the height is adjusted for this animation, causing all matched
 120          * elements to be hidden in a "sliding" manner.
 121          *
 122          * @example $("p").slideToggle("slow");
 123          *
 124          * @example $("p").slideToggle("slow",function(){
 125          *   alert("Animation Done.");
 126          * });
 127          *
 128          * @name slideToggle
 129          * @type jQuery
 130          * @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).
 131          * @param Function callback (optional) A function to be executed whenever the animation completes.
 132          * @param String easing (optional) easing effect
 133          * @cat Effects/Animations
 134          * @see slideDown(String|Number,Function)
 135          * @see slideUp(String|Number,Function)
 136          */
 137         slideToggle: function(speed, callback, easing){
 138                 return this.each(function(){
 139                         var state = jQuery(this).is(":hidden") ? "show" : "hide";
 140                         jQuery(this).animate({height: state}, speed, callback, easing);
 141                 });
 142         },
 143
 144         /**
 145          * Fade in all matched elements by adjusting their opacity and firing an
 146          * optional callback after completion.
 147          *
 148          * Only the opacity is adjusted for this animation, meaning that
 149          * all of the matched elements should already have some form of height
 150          * and width associated with them.
 151          *
 152          * @example $("p").fadeIn("slow");
 153          *
 154          * @example $("p").fadeIn("slow",function(){
 155          *   alert("Animation Done.");
 156          * });
 157          *
 158          * @name fadeIn
 159          * @type jQuery
 160          * @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).
 161          * @param Function callback (optional) A function to be executed whenever the animation completes.
 162          * @param String easing (optional) easing effect
 163          * @cat Effects/Animations
 164          * @see fadeOut(String|Number,Function)
 165          * @see fadeTo(String|Number,Number,Function)
 166          */
 167         fadeIn: function(speed, callback, easing){
 168                 return this.animate({opacity: "show"}, speed, callback, easing);
 169         },
 170
 171         /**
 172          * Fade out all matched elements by adjusting their opacity and firing an
 173          * optional callback after completion.
 174          *
 175          * Only the opacity is adjusted for this animation, meaning that
 176          * all of the matched elements should already have some form of height
 177          * and width associated with them.
 178          *
 179          * @example $("p").fadeOut("slow");
 180          *
 181          * @example $("p").fadeOut("slow",function(){
 182          *   alert("Animation Done.");
 183          * });
 184          *
 185          * @name fadeOut
 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          * @param String easing (optional) easing effect
 190          * @cat Effects/Animations
 191          * @see fadeIn(String|Number,Function)
 192          * @see fadeTo(String|Number,Number,Function)
 193          */
 194         fadeOut: function(speed, callback, easing){
 195                 return this.animate({opacity: "hide"}, speed, callback, easing);
 196         },
 197
 198         /**
 199          * Fade the opacity of all matched elements to a specified opacity and firing an
 200          * optional callback after completion.
 201          *
 202          * Only the opacity is adjusted for this animation, meaning that
 203          * all of the matched elements should already have some form of height
 204          * and width associated with them.
 205          *
 206          * @example $("p").fadeTo("slow", 0.5);
 207          *
 208          * @example $("p").fadeTo("slow", 0.5, function(){
 209          *   alert("Animation Done.");
 210          * });
 211          *
 212          * @name fadeTo
 213          * @type jQuery
 214          * @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).
 215          * @param Number opacity The opacity to fade to (a number from 0 to 1).
 216          * @param Function callback (optional) A function to be executed whenever the animation completes.
 217          * @param String easing (optional) easing effect
 218          * @cat Effects/Animations
 219          * @see fadeIn(String|Number,Function)
 220          * @see fadeOut(String|Number,Function)
 221          */
 222         fadeTo: function(speed,to,callback, easing){
 223                 return this.animate({opacity: to}, speed, callback, easing);
 224         },
 225
 226         /**
 227          * A function for making your own, custom, animations. The key aspect of
 228          * this function is the object of style properties that will be animated,
 229          * and to what end. Each key within the object represents a style property
 230          * that will also be animated (for example: "height", "top", or "opacity").
 231          *
 232          * The value associated with the key represents to what end the property
 233          * will be animated. If a number is provided as the value, then the style
 234          * property will be transitioned from its current state to that new number.
 235          * Oterwise if the string "hide", "show", or "toggle" is provided, a default
 236          * animation will be constructed for that property.
 237          *
 238          * @example $("p").animate({
 239          *   height: 'toggle', opacity: 'toggle'
 240          * }, "slow");
 241          *
 242          * @example $("p").animate({
 243          *   left: 50, opacity: 'show'
 244          * }, 500);
 245          *
 246          * @name animate
 247          * @type jQuery
 248          * @param Hash params A set of style attributes that you wish to animate, and to what end.
 249          * @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).
 250          * @param Function callback (optional) A function to be executed whenever the animation completes.
 251          * @param String easing (optional) easing effect
 252          * @cat Effects/Animations
 253          */
 254         animate: function(prop,speed,callback, easing) {
 255                 return this.queue(function(){
 256
 257                         this.curAnim = jQuery.extend({}, prop);
 258
 259                         for ( var p in prop ) {
 260                                 var e = new jQuery.fx( this, jQuery.speed(speed,callback), p, easing );
 261                                 if ( prop[p].constructor == Number )
 262                                         e.custom( e.cur(), prop[p] );
 263                                 else
 264                                         e[ prop[p] ]( prop );
 265                         }
 266
 267                 });
 268         },
 269
 270         /**
 271          *
 272          * @private
 273          */
 274         queue: function(type,fn){
 275                 if ( !fn ) {
 276                         fn = type;
 277                         type = "fx";
 278                 }
 279
 280                 return this.each(function(){
 281                         if ( !this.queue )
 282                                 this.queue = {};
 283
 284                         if ( !this.queue[type] )
 285                                 this.queue[type] = [];
 286
 287                         this.queue[type].push( fn );
 288
 289                         if ( this.queue[type].length == 1 )
 290                                 fn.apply(this);
 291                 });
 292         }
 293
 294 });
 295
 296 jQuery.extend({
 297
 298         speed: function(s,o) {
 299                 o = o || {};
 300
 301                 if ( o.constructor == Function )
 302                         o = { complete: o };
 303
 304                 var ss = { slow: 600, fast: 200 };
 305                 o.duration = (s && s.constructor == Number ? s : ss[s]) || 400;
 306
 307                 // Queueing
 308                 o.oldComplete = o.complete;
 309                 o.complete = function(){
 310                         jQuery.dequeue(this, "fx");
 311                         if ( o.oldComplete && o.oldComplete.constructor == Function )
 312                                 o.oldComplete.apply( this );
 313                 };
 314
 315                 return o;
 316         },
 317
 318         queue: {},
 319
 320         dequeue: function(elem,type){
 321                 type = type || "fx";
 322
 323                 if ( elem.queue && elem.queue[type] ) {
 324                         // Remove self
 325                         elem.queue[type].shift();
 326
 327                         // Get next function
 328                         var f = elem.queue[type][0];
 329
 330                         if ( f ) f.apply( elem );
 331                 }
 332         },
 333
 334         /*
 335          * I originally wrote fx() as a clone of moo.fx and in the process
 336          * of making it small in size the code became illegible to sane
 337          * people. You've been warned.
 338          */
 339
 340         fx: function( elem, options, prop, easing ){
 341
 342                 var z = this;
 343
 344                 // The users options
 345                 z.o = {
 346                         duration: options.duration || 400,
 347                         complete: options.complete,
 348                         step: options.step,
 349                         easing : easing || 'linear'
 350                 };
 351
 352                 // The element
 353                 z.el = elem;
 354
 355                 // The styles
 356                 var y = z.el.style;
 357
 358                 // Store display property
 359                 var oldDisplay = jQuery.css(z.el, 'display');
 360                 // Set display property to block for animation
 361                 y.display = "block";
 362                 // Make sure that nothing sneaks out
 363                 y.overflow = "hidden";
 364
 365                 // Simple function for setting a style value
 366                 z.a = function(){
 367                         if ( options.step )
 368                                 options.step.apply( elem, [ z.now ] );
 369
 370                         if ( prop == "opacity" )
 371                                 jQuery.attr(y, "opacity", z.now); // Let attr handle opacity
 372                         else if ( parseInt(z.now) ) // My hate for IE will never die
 373                                 y[prop] = parseInt(z.now) + "px";
 374                 };
 375
 376                 // Figure out the maximum number to run to
 377                 z.max = function(){
 378                         return parseFloat( jQuery.css(z.el,prop) );
 379                 };
 380
 381                 // Get the current size
 382                 z.cur = function(){
 383                         var r = parseFloat( jQuery.curCSS(z.el, prop) );
 384                         return r && r > -10000 ? r : z.max();
 385                 };
 386
 387                 // Start an animation from one number to another
 388                 z.custom = function(from,to){
 389                         z.startTime = (new Date()).getTime();
 390                         z.now = from;
 391                         z.a();
 392
 393                         z.timer = setInterval(function(){
 394                                 z.step(from, to);
 395                         }, 13);
 396                 };
 397
 398                 // Simple 'show' function
 399                 z.show = function(){
 400                         if ( !z.el.orig ) z.el.orig = {};
 401
 402                         // Remember where we started, so that we can go back to it later
 403                         z.el.orig[prop] = this.cur();
 404
 405                         z.o.show = true;
 406
 407                         // Begin the animation
 408                         z.custom(0, z.el.orig[prop]);
 409
 410                         // Stupid IE, look what you made me do
 411                         if ( prop != "opacity" )
 412                                 y[prop] = "1px";
 413                 };
 414
 415                 // Simple 'hide' function
 416                 z.hide = function(){
 417                         if ( !z.el.orig ) z.el.orig = {};
 418
 419                         // Remember where we started, so that we can go back to it later
 420                         z.el.orig[prop] = this.cur();
 421
 422                         z.o.hide = true;
 423
 424                         // Begin the animation
 425                         z.custom(z.el.orig[prop], 0);
 426                 };
 427
 428                 //Simple 'toggle' function
 429                 z.toggle = function() {
 430                         if ( !z.el.orig ) z.el.orig = {};
 431
 432                         // Remember where we started, so that we can go back to it later
 433                         z.el.orig[prop] = this.cur();
 434
 435                         if(oldDisplay == 'none')  {
 436                                 z.o.show = true;
 437
 438                                 // Stupid IE, look what you made me do
 439                                 if ( prop != "opacity" )
 440                                         y[prop] = "1px";
 441
 442                                 // Begin the animation
 443                                 z.custom(0, z.el.orig[prop]);
 444                         } else {
 445                                 z.o.hide = true;
 446
 447                                 // Begin the animation
 448                                 z.custom(z.el.orig[prop], 0);
 449                         }
 450                 };
 451
 452                 // Each step of an animation
 453                 z.step = function(firstNum, lastNum){
 454                         var t = (new Date()).getTime();
 455
 456                         if (t > z.o.duration + z.startTime) {
 457                                 // Stop the timer
 458                                 clearInterval(z.timer);
 459                                 z.timer = null;
 460
 461                                 z.now = lastNum;
 462                                 z.a();
 463
 464                                 if (z.el.curAnim) z.el.curAnim[ prop ] = true;
 465
 466                                 var done = true;
 467                                 for ( var i in z.el.curAnim )
 468                                         if ( z.el.curAnim[i] !== true )
 469                                                 done = false;
 470
 471                                 if ( done ) {
 472                                         // Reset the overflow
 473                                         y.overflow = '';
 474
 475                                         // Reset the display
 476                                         y.display = oldDisplay;
 477                                         if (jQuery.css(z.el, 'display') == 'none')
 478                                                 y.display = 'block';
 479
 480                                         // Hide the element if the "hide" operation was done
 481                                         if ( z.o.hide )
 482                                                 y.display = 'none';
 483
 484                                         // Reset the properties, if the item has been hidden or shown
 485                                         if ( z.o.hide || z.o.show )
 486                                                 for ( var p in z.el.curAnim )
 487                                                         if (p == "opacity")
 488                                                                 jQuery.attr(y, p, z.el.orig[p]);
 489                                                         else
 490                                                                 y[p] = '';
 491                                 }
 492
 493                                 // If a callback was provided, execute it
 494                                 if( done && z.o.complete && z.o.complete.constructor == Function )
 495                                         // Execute the complete function
 496                                         z.o.complete.apply( z.el );
 497                         } else {
 498                                 var n = t - this.startTime;
 499                                 // Figure out where in the animation we are and set the number
 500                                 var p = n / z.o.duration;
 501                                 //if the easing function exists then use it else use default linear easing
 502                                 if (jQuery.easing[z.o.easing])
 503                                         z.now = jQuery.easing[z.o.easing](p, n,  firstNum, (lastNum-firstNum), z.o.duration);
 504                                 else
 505                                         z.now = ((-Math.cos(p*Math.PI)/2) + 0.5) * (lastNum-firstNum) + firstNum;
 506
 507                                 // Perform the next step of the animation
 508                                 z.a();
 509                         }
 510                 };
 511
 512         },
 513
 514         /**
 515          *
 516          * @param Integer p period step in animation
 517          * @param Integer n current time
 518          * @param Mixed firstNum begin value
 519          * @param Mixed delta change in
 520          * @param Integer duration duration
 521          */
 522         easing :  {
 523                 linear: function(p, n, firstNum, delta, duration) {
 524                         return ((-Math.cos(p*Math.PI)/2) + 0.5) * delta + firstNum;
 525                 },
 526
 527                 easein: function(p, n, firstNum, delta, duration) {
 528                         return delta*(n/=duration)*n*n + firstNum;
 529                 },
 530
 531                 easeout: function(p, n, firstNum, delta, duration) {
 532                         return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
 533                 },
 534
 535                 easeboth: function(p, n, firstNum, delta, duration) {
 536                         if ((n/=duration/2) < 1)
 537                                 return delta/2*n*n*n*n + firstNum;
 538                                 return -delta/2 * ((n-=2)*n*n*n - 2) + firstNum;
 539                 },
 540
 541                 bounceout: function(p, n, firstNum, delta, duration) {
 542                         if ((n/=duration) < (1/2.75)) {
 543                                 return delta*(7.5625*n*n) + firstNum;
 544                         } else if (n < (2/2.75)) {
 545                                 return delta*(7.5625*(n-=(1.5/2.75))*n + .75) + firstNum;
 546                         } else if (n < (2.5/2.75)) {
 547                                 return delta*(7.5625*(n-=(2.25/2.75))*n + .9375) + firstNum;
 548                         } else {
 549                                 return delta*(7.5625*(n-=(2.625/2.75))*n + .984375) + firstNum;
 550                         }
 551                 },
 552
 553                 bouncein: function(p, n, firstNum, delta, duration) {
 554                         if (jQuery.easing.bounceout)
 555                                 return delta - jQuery.easing.bounceout (p, duration - n, 0, delta, duration) + firstNum;
 556                         return firstNum + delta;
 557                 },
 558
 559                 bounceboth: function(p, n, firstNum, delta, duration) {
 560                         if (jQuery.easing.bouncein && jQuery.easing.bounceout)
 561                                 if (n < duration/2)
 562                                         return jQuery.easing.bouncein(p, n*2, 0, delta, duration) * .5 + firstNum;
 563                                 return jQuery.easing.bounceout(p, n*2-duration, 0, delta, duration) * .5 + delta*.5 + firstNum;
 564                         return firstNum + delta;
 565                 },
 566
 567                 elasticin: function(p, n, firstNum, delta, duration) {
 568                         var a, s;
 569                         if (n == 0)
 570                                 return firstNum;
 571                         if ((n/=duration)==1)
 572                                 return firstNum+delta;
 573                         a = delta * 0.3;
 574                         p=duration*.3;
 575                         if (a < Math.abs(delta)) {
 576                                 a=delta;
 577                                 s=p/4;
 578                         } else {
 579                                 s = p/(2*Math.PI) * Math.asin (delta/a);
 580                         }
 581                         return -(a*Math.pow(2,10*(n-=1)) * Math.sin( (n*duration-s)*(2*Math.PI)/p )) + firstNum;
 582                 },
 583
 584                 elasticout:function(p, n, firstNum, delta, duration) {
 585                         var a, s;
 586                         if (n==0)
 587                                 return firstNum;
 588                         if ((n/=duration/2)==2)
 589                                 return firstNum + delta;
 590                         a = delta * 0.3;
 591                         p=duration*.3;
 592                         if (a < Math.abs(delta)){
 593                                 a = delta;
 594                                 s=p/4;
 595                         } else {
 596                                 s = p/(2*Math.PI) * Math.asin (delta/a);
 597                         }
 598                         return a*Math.pow(2,-10*n) * Math.sin( (n*duration-s)*(2*Math.PI)/p ) + delta + firstNum;
 599                 },
 600
 601                 elasticboth: function(p, n, firstNum, delta, duration) {
 602                         var a, s;
 603                         if (n==0)
 604                                 return firstNum;
 605                         if ((n/=duration/2)==2)
 606                                 return firstNum + delta;
 607                         a = delta * 0.3;
 608                         p=duration*.3;
 609                         if (a < Math.abs(delta)){
 610                                 a = delta;
 611                                 s=p/4;
 612                         } else {
 613                                 s = p/(2*Math.PI) * Math.asin (delta/a);
 614                         }
 615                         if (n < 1) {
 616                                 return -.5*(a*Math.pow(2,10*(n-=1)) * Math.sin( (n*duration-s)*(2*Math.PI)/p )) + firstNum;
 617                         }
 618                         return a*Math.pow(2,-10*(n-=1)) * Math.sin( (n*duration-s)*(2*Math.PI)/p )*.5 + delta + firstNum;
 619                 }
 620         }
 621
 622 });