src/effects.js

   1 (function( jQuery ) {
   2
   3 var elemdisplay = {},
   4         rfxtypes = /^(?:toggle|show|hide)$/,
   5         rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,
   6         timerId,
   7         fxAttrs = [
   8                 // height animations
   9                 [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
  10                 // width animations
  11                 [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
  12                 // opacity animations
  13                 [ "opacity" ]
  14         ],
  15         fxNow,
  16         requestAnimationFrame = window.webkitRequestAnimationFrame ||
  17             window.mozRequestAnimationFrame ||
  18             window.oRequestAnimationFrame;
  19
  20 function clearFxNow() {
  21         fxNow = undefined;
  22 }
  23
  24 function createFxNow() {
  25         setTimeout( clearFxNow, 0 );
  26         return ( fxNow = jQuery.now() );
  27 }
  28
  29 jQuery.fn.extend({
  30         show: function( speed, easing, callback ) {
  31                 var elem, display;
  32
  33                 if ( speed || speed === 0 ) {
  34                         return this.animate( genFx("show", 3), speed, easing, callback);
  35
  36                 } else {
  37                         for ( var i = 0, j = this.length; i < j; i++ ) {
  38                                 elem = this[i];
  39                                 display = elem.style.display;
  40
  41                                 // Reset the inline display of this element to learn if it is
  42                                 // being hidden by cascaded rules or not
  43                                 if ( !jQuery._data(elem, "olddisplay") && display === "none" ) {
  44                                         display = elem.style.display = "";
  45                                 }
  46
  47                                 // Set elements which have been overridden with display: none
  48                                 // in a stylesheet to whatever the default browser style is
  49                                 // for such an element
  50                                 if ( display === "" && jQuery.css( elem, "display" ) === "none" ) {
  51                                         jQuery._data(elem, "olddisplay", defaultDisplay(elem.nodeName));
  52                                 }
  53                         }
  54
  55                         // Set the display of most of the elements in a second loop
  56                         // to avoid the constant reflow
  57                         for ( i = 0; i < j; i++ ) {
  58                                 elem = this[i];
  59                                 display = elem.style.display;
  60
  61                                 if ( display === "" || display === "none" ) {
  62                                         elem.style.display = jQuery._data(elem, "olddisplay") || "";
  63                                 }
  64                         }
  65
  66                         return this;
  67                 }
  68         },
  69
  70         hide: function( speed, easing, callback ) {
  71                 if ( speed || speed === 0 ) {
  72                         return this.animate( genFx("hide", 3), speed, easing, callback);
  73
  74                 } else {
  75                         for ( var i = 0, j = this.length; i < j; i++ ) {
  76                                 var display = jQuery.css( this[i], "display" );
  77
  78                                 if ( display !== "none" && !jQuery._data( this[i], "olddisplay" ) ) {
  79                                         jQuery._data( this[i], "olddisplay", display );
  80                                 }
  81                         }
  82
  83                         // Set the display of the elements in a second loop
  84                         // to avoid the constant reflow
  85                         for ( i = 0; i < j; i++ ) {
  86                                 this[i].style.display = "none";
  87                         }
  88
  89                         return this;
  90                 }
  91         },
  92
  93         // Save the old toggle function
  94         _toggle: jQuery.fn.toggle,
  95
  96         toggle: function( fn, fn2, callback ) {
  97                 var bool = typeof fn === "boolean";
  98
  99                 if ( jQuery.isFunction(fn) && jQuery.isFunction(fn2) ) {
 100                         this._toggle.apply( this, arguments );
 101
 102                 } else if ( fn == null || bool ) {
 103                         this.each(function() {
 104                                 var state = bool ? fn : jQuery(this).is(":hidden");
 105                                 jQuery(this)[ state ? "show" : "hide" ]();
 106                         });
 107
 108                 } else {
 109                         this.animate(genFx("toggle", 3), fn, fn2, callback);
 110                 }
 111
 112                 return this;
 113         },
 114
 115         fadeTo: function( speed, to, easing, callback ) {
 116                 return this.filter(":hidden").css("opacity", 0).show().end()
 117                                         .animate({opacity: to}, speed, easing, callback);
 118         },
 119
 120         animate: function( prop, speed, easing, callback ) {
 121                 var optall = jQuery.speed(speed, easing, callback);
 122
 123                 if ( jQuery.isEmptyObject( prop ) ) {
 124                         return this.each( optall.complete, [ false ] );
 125                 }
 126
 127                 return this[ optall.queue === false ? "each" : "queue" ](function() {
 128                         // XXX 'this' does not always have a nodeName when running the
 129                         // test suite
 130
 131                         if ( optall.queue === false ) {
 132                                 jQuery._mark( this );
 133                         }
 134
 135                         var opt = jQuery.extend({}, optall), p,
 136                                 isElement = this.nodeType === 1,
 137                                 hidden = isElement && jQuery(this).is(":hidden"),
 138                                 self = this;
 139
 140                         for ( p in prop ) {
 141                                 var name = jQuery.camelCase( p );
 142
 143                                 if ( p !== name ) {
 144                                         prop[ name ] = prop[ p ];
 145                                         delete prop[ p ];
 146                                         p = name;
 147                                 }
 148
 149                                 if ( prop[p] === "hide" && hidden || prop[p] === "show" && !hidden ) {
 150                                         return opt.complete.call(this);
 151                                 }
 152
 153                                 if ( isElement && ( p === "height" || p === "width" ) ) {
 154                                         // Make sure that nothing sneaks out
 155                                         // Record all 3 overflow attributes because IE does not
 156                                         // change the overflow attribute when overflowX and
 157                                         // overflowY are set to the same value
 158                                         opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
 159
 160                                         // Set display property to inline-block for height/width
 161                                         // animations on inline elements that are having width/height
 162                                         // animated
 163                                         if ( jQuery.css( this, "display" ) === "inline" &&
 164                                                         jQuery.css( this, "float" ) === "none" ) {
 165                                                 if ( !jQuery.support.inlineBlockNeedsLayout ) {
 166                                                         this.style.display = "inline-block";
 167
 168                                                 } else {
 169                                                         var display = defaultDisplay(this.nodeName);
 170
 171                                                         // inline-level elements accept inline-block;
 172                                                         // block-level elements need to be inline with layout
 173                                                         if ( display === "inline" ) {
 174                                                                 this.style.display = "inline-block";
 175
 176                                                         } else {
 177                                                                 this.style.display = "inline";
 178                                                                 this.style.zoom = 1;
 179                                                         }
 180                                                 }
 181                                         }
 182                                 }
 183
 184                                 if ( jQuery.isArray( prop[p] ) ) {
 185                                         // Create (if needed) and add to specialEasing
 186                                         (opt.specialEasing = opt.specialEasing || {})[p] = prop[p][1];
 187                                         prop[p] = prop[p][0];
 188                                 }
 189                         }
 190
 191                         if ( opt.overflow != null ) {
 192                                 this.style.overflow = "hidden";
 193                         }
 194
 195                         opt.curAnim = jQuery.extend({}, prop);
 196
 197                         jQuery.each( prop, function( name, val ) {
 198                                 var e = new jQuery.fx( self, opt, name );
 199
 200                                 if ( rfxtypes.test(val) ) {
 201                                         e[ val === "toggle" ? hidden ? "show" : "hide" : val ]( prop );
 202
 203                                 } else {
 204                                         var parts = rfxnum.exec(val),
 205                                                 start = e.cur();
 206
 207                                         if ( parts ) {
 208                                                 var end = parseFloat( parts[2] ),
 209                                                         unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" );
 210
 211                                                 // We need to compute starting value
 212                                                 if ( unit !== "px" ) {
 213                                                         jQuery.style( self, name, (end || 1) + unit);
 214                                                         start = ((end || 1) / e.cur()) * start;
 215                                                         jQuery.style( self, name, start + unit);
 216                                                 }
 217
 218                                                 // If a +=/-= token was provided, we're doing a relative animation
 219                                                 if ( parts[1] ) {
 220                                                         end = ((parts[1] === "-=" ? -1 : 1) * end) + start;
 221                                                 }
 222
 223                                                 e.custom( start, end, unit );
 224
 225                                         } else {
 226                                                 e.custom( start, val, "" );
 227                                         }
 228                                 }
 229                         });
 230
 231                         // For JS strict compliance
 232                         return true;
 233                 });
 234         },
 235
 236         stop: function( clearQueue, gotoEnd ) {
 237                 var timers = jQuery.timers;
 238
 239                 if ( clearQueue ) {
 240                         this.queue([]);
 241                 }
 242
 243                 this.each(function() {
 244                         // clear marker counters if we know they won't be
 245                         if ( !gotoEnd ) {
 246                                 jQuery._unmark( true, this );
 247                         }
 248                         // go in reverse order so anything added to the queue during the loop is ignored
 249                         for ( var i = timers.length - 1; i >= 0; i-- ) {
 250                                 if ( timers[i].elem === this ) {
 251                                         if (gotoEnd) {
 252                                                 // force the next step to be the last
 253                                                 timers[i](true);
 254                                         }
 255
 256                                         timers.splice(i, 1);
 257                                 }
 258                         }
 259                 });
 260
 261                 // start the next in the queue if the last step wasn't forced
 262                 if ( !gotoEnd ) {
 263                         this.dequeue();
 264                 }
 265
 266                 return this;
 267         }
 268
 269 });
 270
 271 function genFx( type, num ) {
 272         var obj = {};
 273
 274         jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function() {
 275                 obj[ this ] = type;
 276         });
 277
 278         return obj;
 279 }
 280
 281 // Generate shortcuts for custom animations
 282 jQuery.each({
 283         slideDown: genFx("show", 1),
 284         slideUp: genFx("hide", 1),
 285         slideToggle: genFx("toggle", 1),
 286         fadeIn: { opacity: "show" },
 287         fadeOut: { opacity: "hide" },
 288         fadeToggle: { opacity: "toggle" }
 289 }, function( name, props ) {
 290         jQuery.fn[ name ] = function( speed, easing, callback ) {
 291                 return this.animate( props, speed, easing, callback );
 292         };
 293 });
 294
 295 jQuery.extend({
 296         speed: function( speed, easing, fn ) {
 297                 var opt = speed && typeof speed === "object" ? jQuery.extend({}, speed) : {
 298                         complete: fn || !fn && easing ||
 299                                 jQuery.isFunction( speed ) && speed,
 300                         duration: speed,
 301                         easing: fn && easing || easing && !jQuery.isFunction(easing) && easing
 302                 };
 303
 304                 opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
 305                         opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[opt.duration] : jQuery.fx.speeds._default;
 306
 307                 // Queueing
 308                 opt.old = opt.complete;
 309                 opt.complete = function( noUnmark ) {
 310                         if ( opt.queue !== false ) {
 311                                 jQuery.dequeue( this );
 312                         } else if ( noUnmark !== false ) {
 313                                 jQuery._unmark( this );
 314                         }
 315
 316                         if ( jQuery.isFunction( opt.old ) ) {
 317                                 opt.old.call( this );
 318                         }
 319                 };
 320
 321                 return opt;
 322         },
 323
 324         easing: {
 325                 linear: function( p, n, firstNum, diff ) {
 326                         return firstNum + diff * p;
 327                 },
 328                 swing: function( p, n, firstNum, diff ) {
 329                         return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
 330                 }
 331         },
 332
 333         timers: [],
 334
 335         fx: function( elem, options, prop ) {
 336                 this.options = options;
 337                 this.elem = elem;
 338                 this.prop = prop;
 339
 340                 if ( !options.orig ) {
 341                         options.orig = {};
 342                 }
 343         }
 344
 345 });
 346
 347 jQuery.fx.prototype = {
 348         // Simple function for setting a style value
 349         update: function() {
 350                 if ( this.options.step ) {
 351                         this.options.step.call( this.elem, this.now, this );
 352                 }
 353
 354                 (jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );
 355         },
 356
 357         // Get the current size
 358         cur: function() {
 359                 if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
 360                         return this.elem[ this.prop ];
 361                 }
 362
 363                 var parsed,
 364                         r = jQuery.css( this.elem, this.prop );
 365                 // Empty strings, null, undefined and "auto" are converted to 0,
 366                 // complex values such as "rotate(1rad)" are returned as is,
 367                 // simple values such as "10px" are parsed to Float.
 368                 return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
 369         },
 370
 371         // Start an animation from one number to another
 372         custom: function( from, to, unit ) {
 373                 var self = this,
 374                         fx = jQuery.fx,
 375                         raf;
 376
 377                 this.startTime = fxNow || createFxNow();
 378                 this.start = from;
 379                 this.end = to;
 380                 this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
 381                 this.now = this.start;
 382                 this.pos = this.state = 0;
 383
 384                 function t( gotoEnd ) {
 385                         return self.step(gotoEnd);
 386                 }
 387
 388                 t.elem = this.elem;
 389
 390                 if ( t() && jQuery.timers.push(t) && !timerId ) {
 391                         // Use requestAnimationFrame instead of setInterval if available
 392                         if ( requestAnimationFrame ) {
 393                                 timerId = 1;
 394                                 raf = function() {
 395                                         // When timerId gets set to null at any point, this stops
 396                                         if ( timerId ) {
 397                                                 requestAnimationFrame( raf );
 398                                                 fx.tick();
 399                                         }
 400                                 };
 401                                 requestAnimationFrame( raf );
 402                         } else {
 403                                 timerId = setInterval( fx.tick, fx.interval );
 404                         }
 405                 }
 406         },
 407
 408         // Simple 'show' function
 409         show: function() {
 410                 // Remember where we started, so that we can go back to it later
 411                 this.options.orig[this.prop] = jQuery.style( this.elem, this.prop );
 412                 this.options.show = true;
 413
 414                 // Begin the animation
 415                 // Make sure that we start at a small width/height to avoid any
 416                 // flash of content
 417                 this.custom(this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur());
 418
 419                 // Start by showing the element
 420                 jQuery( this.elem ).show();
 421         },
 422
 423         // Simple 'hide' function
 424         hide: function() {
 425                 // Remember where we started, so that we can go back to it later
 426                 this.options.orig[this.prop] = jQuery.style( this.elem, this.prop );
 427                 this.options.hide = true;
 428
 429                 // Begin the animation
 430                 this.custom(this.cur(), 0);
 431         },
 432
 433         // Each step of an animation
 434         step: function( gotoEnd ) {
 435                 var t = fxNow || createFxNow(),
 436                         done = true;
 437
 438                 if ( gotoEnd || t >= this.options.duration + this.startTime ) {
 439                         this.now = this.end;
 440                         this.pos = this.state = 1;
 441                         this.update();
 442
 443                         this.options.curAnim[ this.prop ] = true;
 444
 445                         for ( var i in this.options.curAnim ) {
 446                                 if ( this.options.curAnim[i] !== true ) {
 447                                         done = false;
 448                                 }
 449                         }
 450
 451                         if ( done ) {
 452                                 // Reset the overflow
 453                                 if ( this.options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {
 454                                         var elem = this.elem,
 455                                                 options = this.options;
 456
 457                                         jQuery.each( [ "", "X", "Y" ], function (index, value) {
 458                                                 elem.style[ "overflow" + value ] = options.overflow[index];
 459                                         });
 460                                 }
 461
 462                                 // Hide the element if the "hide" operation was done
 463                                 if ( this.options.hide ) {
 464                                         jQuery(this.elem).hide();
 465                                 }
 466
 467                                 // Reset the properties, if the item has been hidden or shown
 468                                 if ( this.options.hide || this.options.show ) {
 469                                         for ( var p in this.options.curAnim ) {
 470                                                 jQuery.style( this.elem, p, this.options.orig[p] );
 471                                         }
 472                                 }
 473
 474                                 // Execute the complete function
 475                                 this.options.complete.call( this.elem );
 476                         }
 477
 478                         return false;
 479
 480                 } else {
 481                         var n = t - this.startTime;
 482                         this.state = n / this.options.duration;
 483
 484                         // Perform the easing function, defaults to swing
 485                         var specialEasing = this.options.specialEasing && this.options.specialEasing[this.prop];
 486                         var defaultEasing = this.options.easing || (jQuery.easing.swing ? "swing" : "linear");
 487                         this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);
 488                         this.now = this.start + ((this.end - this.start) * this.pos);
 489
 490                         // Perform the next step of the animation
 491                         this.update();
 492                 }
 493
 494                 return true;
 495         }
 496 };
 497
 498 jQuery.extend( jQuery.fx, {
 499         tick: function() {
 500                 var timers = jQuery.timers;
 501
 502                 for ( var i = 0; i < timers.length; i++ ) {
 503                         if ( !timers[i]() ) {
 504                                 timers.splice(i--, 1);
 505                         }
 506                 }
 507
 508                 if ( !timers.length ) {
 509                         jQuery.fx.stop();
 510                 }
 511         },
 512
 513         interval: 13,
 514
 515         stop: function() {
 516                 clearInterval( timerId );
 517                 timerId = null;
 518         },
 519
 520         speeds: {
 521                 slow: 600,
 522                 fast: 200,
 523                 // Default speed
 524                 _default: 400
 525         },
 526
 527         step: {
 528                 opacity: function( fx ) {
 529                         jQuery.style( fx.elem, "opacity", fx.now );
 530                 },
 531
 532                 _default: function( fx ) {
 533                         if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {
 534                                 fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;
 535                         } else {
 536                                 fx.elem[ fx.prop ] = fx.now;
 537                         }
 538                 }
 539         }
 540 });
 541
 542 if ( jQuery.expr && jQuery.expr.filters ) {
 543         jQuery.expr.filters.animated = function( elem ) {
 544                 return jQuery.grep(jQuery.timers, function( fn ) {
 545                         return elem === fn.elem;
 546                 }).length;
 547         };
 548 }
 549
 550 function defaultDisplay( nodeName ) {
 551
 552         if ( !elemdisplay[ nodeName ] ) {
 553
 554                 var elem = jQuery( "<" + nodeName + ">" ).appendTo( "body" ),
 555                         display = elem.css( "display" );
 556
 557                 elem.remove();
 558
 559                 if ( display === "none" || display === "" ) {
 560
 561                         var iframe = defaultDisplay.iframe,
 562                                         iframeDoc = defaultDisplay.iframeDoc;
 563
 564                         // No iframe to use yet, so create it
 565                         if ( !defaultDisplay.iframe ) {
 566
 567                                 iframe = document.createElement( "iframe" );
 568                                 iframe.width = iframe.height = 0;
 569
 570                                 document.body.appendChild( iframe );
 571
 572                                 iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
 573                                 iframeDoc.write("<!doctype><html><body></body></html>");
 574
 575                                 // Cache iframe element
 576                                 defaultDisplay.iframe = iframe;
 577                                 defaultDisplay.iframeDoc = iframeDoc;
 578                         } else {
 579
 580                                 // Reuse previous iframe
 581                                 document.body.appendChild( iframe );
 582
 583                         }
 584
 585                         elem = iframeDoc.createElement( nodeName );
 586
 587                         iframeDoc.body.appendChild( elem );
 588
 589                         display = jQuery( elem ).css( "display" );
 590
 591                         iframe.parentNode.removeChild( iframe );
 592                 }
 593
 594                 // Store the correct default display
 595                 elemdisplay[ nodeName ] = display;
 596         }
 597
 598         return elemdisplay[ nodeName ];
 599 }
 600
 601 defaultDisplay.iframe = null;
 602 defaultDisplay.iframeDoc = null;
 603
 604
 605
 606 })( jQuery );