Style edits, code reductions, and optimizations for the effects module

This commit is contained in:
timmywil 2011-05-28 21:39:34 -04:00
parent d66c3b6d84
commit 51aa9c5f32
2 changed files with 55 additions and 54 deletions

87
src/effects.js vendored
View file

@ -120,7 +120,7 @@ jQuery.fn.extend({
}, },
animate: function( prop, speed, easing, callback ) { animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback); var optall = jQuery.speed( speed, easing, callback );
if ( jQuery.isEmptyObject( prop ) ) { if ( jQuery.isEmptyObject( prop ) ) {
return this.each( optall.complete, [ false ] ); return this.each( optall.complete, [ false ] );
@ -140,8 +140,7 @@ jQuery.fn.extend({
var opt = jQuery.extend( {}, optall ), var opt = jQuery.extend( {}, optall ),
isElement = this.nodeType === 1, isElement = this.nodeType === 1,
hidden = isElement && jQuery(this).is(":hidden"), hidden = isElement && jQuery(this).is(":hidden"),
name, val, p, name, val, p, e,
display, e,
parts, start, end, unit; parts, start, end, unit;
// will store per property easing and be used to determine when an animation is complete // will store per property easing and be used to determine when an animation is complete
@ -182,21 +181,14 @@ jQuery.fn.extend({
// animated // animated
if ( jQuery.css( this, "display" ) === "inline" && if ( jQuery.css( this, "display" ) === "inline" &&
jQuery.css( this, "float" ) === "none" ) { jQuery.css( this, "float" ) === "none" ) {
if ( !jQuery.support.inlineBlockNeedsLayout ) {
// inline-level elements accept inline-block;
// block-level elements need to be inline with layout
if ( !jQuery.support.inlineBlockNeedsLayout || defaultDisplay( this.nodeName ) === "inline" ) {
this.style.display = "inline-block"; this.style.display = "inline-block";
} else { } else {
display = defaultDisplay( this.nodeName ); this.style.zoom = 1;
// inline-level elements accept inline-block;
// block-level elements need to be inline with layout
if ( display === "inline" ) {
this.style.display = "inline-block";
} else {
this.style.display = "inline";
this.style.zoom = 1;
}
} }
} }
} }
@ -210,7 +202,7 @@ jQuery.fn.extend({
e = new jQuery.fx( this, opt, p ); e = new jQuery.fx( this, opt, p );
val = prop[ p ]; val = prop[ p ];
if ( rfxtypes.test(val) ) { if ( rfxtypes.test( val ) ) {
e[ val === "toggle" ? hidden ? "show" : "hide" : val ](); e[ val === "toggle" ? hidden ? "show" : "hide" : val ]();
} else { } else {
@ -259,10 +251,10 @@ jQuery.fn.extend({
jQuery._unmark( true, this ); jQuery._unmark( true, this );
} }
while ( i-- ) { while ( i-- ) {
if ( timers[i].elem === this ) { if ( timers[ i ].elem === this ) {
if (gotoEnd) { if ( gotoEnd ) {
// force the next step to be the last // force the next step to be the last
timers[i](true); timers[ i ]( true );
} }
timers.splice(i, 1); timers.splice(i, 1);
@ -294,7 +286,7 @@ function clearFxNow() {
function genFx( type, num ) { function genFx( type, num ) {
var obj = {}; var obj = {};
jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function() { jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() {
obj[ this ] = type; obj[ this ] = type;
}); });
@ -303,9 +295,9 @@ function genFx( type, num ) {
// Generate shortcuts for custom animations // Generate shortcuts for custom animations
jQuery.each({ jQuery.each({
slideDown: genFx("show", 1), slideDown: genFx( "show", 1 ),
slideUp: genFx("hide", 1), slideUp: genFx( "hide", 1 ),
slideToggle: genFx("toggle", 1), slideToggle: genFx( "toggle", 1 ),
fadeIn: { opacity: "show" }, fadeIn: { opacity: "show" },
fadeOut: { opacity: "hide" }, fadeOut: { opacity: "hide" },
fadeToggle: { opacity: "toggle" } fadeToggle: { opacity: "toggle" }
@ -317,15 +309,15 @@ jQuery.each({
jQuery.extend({ jQuery.extend({
speed: function( speed, easing, fn ) { speed: function( speed, easing, fn ) {
var opt = speed && typeof speed === "object" ? jQuery.extend({}, speed) : { var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
complete: fn || !fn && easing || complete: fn || !fn && easing ||
jQuery.isFunction( speed ) && speed, jQuery.isFunction( speed ) && speed,
duration: speed, duration: speed,
easing: fn && easing || easing && !jQuery.isFunction(easing) && easing easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
}; };
opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration : opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[opt.duration] : jQuery.fx.speeds._default; opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
// Queueing // Queueing
opt.old = opt.complete; opt.old = opt.complete;
@ -372,12 +364,12 @@ jQuery.fx.prototype = {
this.options.step.call( this.elem, this.now, this ); this.options.step.call( this.elem, this.now, this );
} }
(jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this ); (jQuery.fx.step[ this.prop ] || jQuery.fx.step._default)( this );
}, },
// Get the current size // Get the current size
cur: function() { cur: function() {
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) { if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) {
return this.elem[ this.prop ]; return this.elem[ this.prop ];
} }
@ -396,14 +388,13 @@ jQuery.fx.prototype = {
raf; raf;
this.startTime = fxNow || createFxNow(); this.startTime = fxNow || createFxNow();
this.start = from;
this.end = to; this.end = to;
this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" ); this.now = this.start = from;
this.now = this.start;
this.pos = this.state = 0; this.pos = this.state = 0;
this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
function t( gotoEnd ) { function t( gotoEnd ) {
return self.step(gotoEnd); return self.step( gotoEnd );
} }
t.elem = this.elem; t.elem = this.elem;
@ -429,13 +420,13 @@ jQuery.fx.prototype = {
// Simple 'show' function // Simple 'show' function
show: function() { show: function() {
// Remember where we started, so that we can go back to it later // Remember where we started, so that we can go back to it later
this.options.orig[this.prop] = jQuery.style( this.elem, this.prop ); this.options.orig[ this.prop ] = jQuery.style( this.elem, this.prop );
this.options.show = true; this.options.show = true;
// Begin the animation // Begin the animation
// Make sure that we start at a small width/height to avoid any // Make sure that we start at a small width/height to avoid any
// flash of content // flash of content
this.custom(this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur()); this.custom( this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur() );
// Start by showing the element // Start by showing the element
jQuery( this.elem ).show(); jQuery( this.elem ).show();
@ -444,11 +435,11 @@ jQuery.fx.prototype = {
// Simple 'hide' function // Simple 'hide' function
hide: function() { hide: function() {
// Remember where we started, so that we can go back to it later // Remember where we started, so that we can go back to it later
this.options.orig[this.prop] = jQuery.style( this.elem, this.prop ); this.options.orig[ this.prop ] = jQuery.style( this.elem, this.prop );
this.options.hide = true; this.options.hide = true;
// Begin the animation // Begin the animation
this.custom(this.cur(), 0); this.custom( this.cur(), 0 );
}, },
// Each step of an animation // Each step of an animation
@ -467,7 +458,7 @@ jQuery.fx.prototype = {
options.animatedProperties[ this.prop ] = true; options.animatedProperties[ this.prop ] = true;
for ( i in options.animatedProperties ) { for ( i in options.animatedProperties ) {
if ( options.animatedProperties[i] !== true ) { if ( options.animatedProperties[ i ] !== true ) {
done = false; done = false;
} }
} }
@ -476,14 +467,14 @@ jQuery.fx.prototype = {
// Reset the overflow // Reset the overflow
if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) { if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {
jQuery.each( [ "", "X", "Y" ], function (index, value) { jQuery.each( [ "", "X", "Y" ], function( index, value ) {
elem.style[ "overflow" + value ] = options.overflow[index]; elem.style[ "overflow" + value ] = options.overflow[ index ];
}); });
} }
// Hide the element if the "hide" operation was done // Hide the element if the "hide" operation was done
if ( options.hide ) { if ( options.hide ) {
jQuery(elem).hide(); jQuery( elem ).hide();
} }
// Reset the properties, if the item has been hidden or shown // Reset the properties, if the item has been hidden or shown
@ -508,8 +499,8 @@ jQuery.fx.prototype = {
this.state = n / options.duration; this.state = n / options.duration;
// Perform the easing function, defaults to swing // Perform the easing function, defaults to swing
this.pos = jQuery.easing[ options.animatedProperties[ this.prop ] ]( this.state, n, 0, 1, options.duration ); this.pos = jQuery.easing[ options.animatedProperties[this.prop] ]( this.state, n, 0, 1, options.duration );
this.now = this.start + ((this.end - this.start) * this.pos); this.now = this.start + ( (this.end - this.start) * this.pos );
} }
// Perform the next step of the animation // Perform the next step of the animation
this.update(); this.update();
@ -522,7 +513,7 @@ jQuery.fx.prototype = {
jQuery.extend( jQuery.fx, { jQuery.extend( jQuery.fx, {
tick: function() { tick: function() {
for ( var timers = jQuery.timers, i = 0 ; i < timers.length ; ++i ) { for ( var timers = jQuery.timers, i = 0 ; i < timers.length ; ++i ) {
if ( !timers[i]() ) { if ( !timers[ i ]() ) {
timers.splice(i--, 1); timers.splice(i--, 1);
} }
} }
@ -553,7 +544,7 @@ jQuery.extend( jQuery.fx, {
_default: function( fx ) { _default: function( fx ) {
if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) { if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {
fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit; fx.elem.style[ fx.prop ] = fx.now + fx.unit;
} else { } else {
fx.elem[ fx.prop ] = fx.now; fx.elem[ fx.prop ] = fx.now;
} }
@ -561,6 +552,14 @@ jQuery.extend( jQuery.fx, {
} }
}); });
// Adds width/height step functions
// Do not set anything below 0
jQuery.each([ "width", "height" ], function( i, prop ) {
jQuery.fx.step[ prop ] = function( fx ) {
jQuery.style( fx.elem, prop, Math.max(0, fx.now) );
};
});
if ( jQuery.expr && jQuery.expr.filters ) { if ( jQuery.expr && jQuery.expr.filters ) {
jQuery.expr.filters.animated = function( elem ) { jQuery.expr.filters.animated = function( elem ) {
return jQuery.grep(jQuery.timers, function( fn ) { return jQuery.grep(jQuery.timers, function( fn ) {

View file

@ -4,15 +4,15 @@ function handleQueueMarkDefer( elem, type, src ) {
var deferDataKey = type + "defer", var deferDataKey = type + "defer",
queueDataKey = type + "queue", queueDataKey = type + "queue",
markDataKey = type + "mark", markDataKey = type + "mark",
defer = jQuery.data( elem, deferDataKey, undefined, true ); defer = jQuery._data( elem, deferDataKey );
if ( defer && if ( defer &&
( src === "queue" || !jQuery.data( elem, queueDataKey, undefined, true ) ) && ( src === "queue" || !jQuery._data(elem, queueDataKey) ) &&
( src === "mark" || !jQuery.data( elem, markDataKey, undefined, true ) ) ) { ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) {
// Give room for hard-coded callbacks to fire first // Give room for hard-coded callbacks to fire first
// and eventually mark/queue something else on the element // and eventually mark/queue something else on the element
setTimeout( function() { setTimeout( function() {
if ( !jQuery.data( elem, queueDataKey, undefined, true ) && if ( !jQuery._data( elem, queueDataKey ) &&
!jQuery.data( elem, markDataKey, undefined, true ) ) { !jQuery._data( elem, markDataKey ) ) {
jQuery.removeData( elem, deferDataKey, true ); jQuery.removeData( elem, deferDataKey, true );
defer.resolve(); defer.resolve();
} }
@ -25,7 +25,7 @@ jQuery.extend({
_mark: function( elem, type ) { _mark: function( elem, type ) {
if ( elem ) { if ( elem ) {
type = (type || "fx") + "mark"; type = (type || "fx") + "mark";
jQuery.data( elem, type, (jQuery.data(elem,type,undefined,true) || 0) + 1, true ); jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 );
} }
}, },
@ -38,9 +38,9 @@ jQuery.extend({
if ( elem ) { if ( elem ) {
type = type || "fx"; type = type || "fx";
var key = type + "mark", var key = type + "mark",
count = force ? 0 : ( (jQuery.data( elem, key, undefined, true) || 1 ) - 1 ); count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 );
if ( count ) { if ( count ) {
jQuery.data( elem, key, count, true ); jQuery._data( elem, key, count );
} else { } else {
jQuery.removeData( elem, key, true ); jQuery.removeData( elem, key, true );
handleQueueMarkDefer( elem, type, "mark" ); handleQueueMarkDefer( elem, type, "mark" );
@ -49,13 +49,15 @@ jQuery.extend({
}, },
queue: function( elem, type, data ) { queue: function( elem, type, data ) {
var q;
if ( elem ) { if ( elem ) {
type = (type || "fx") + "queue"; type = (type || "fx") + "queue";
var q = jQuery.data( elem, type, undefined, true ); q = jQuery._data( elem, type );
// Speed up dequeue by getting out quickly if this is just a lookup // Speed up dequeue by getting out quickly if this is just a lookup
if ( data ) { if ( data ) {
if ( !q || jQuery.isArray(data) ) { if ( !q || jQuery.isArray(data) ) {
q = jQuery.data( elem, type, jQuery.makeArray(data), true ); q = jQuery._data( elem, type, jQuery.makeArray(data) );
} else { } else {
q.push( data ); q.push( data );
} }