Compare commits

...
Sign in to create a new pull request.

4 commits

3 changed files with 219 additions and 153 deletions

78
src/effects.js vendored
View file

@ -140,9 +140,9 @@ 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; method;
// 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
opt.animatedProperties = {}; opt.animatedProperties = {};
@ -178,29 +178,21 @@ jQuery.fn.extend({
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ]; opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
// Set display property to inline-block for height/width // Set display property to inline-block for height/width
// animations on inline elements that are having width/height // animations on inline elements that are having width/height 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 ) {
this.style.display = "inline-block";
} else {
display = defaultDisplay( this.nodeName );
// inline-level elements accept inline-block; // inline-level elements accept inline-block;
// block-level elements need to be inline with layout // block-level elements need to be inline with layout
if ( display === "inline" ) { if ( !jQuery.support.inlineBlockNeedsLayout || defaultDisplay( this.nodeName ) === "inline" ) {
this.style.display = "inline-block"; this.style.display = "inline-block";
} else { } else {
this.style.display = "inline";
this.style.zoom = 1; this.style.zoom = 1;
} }
} }
} }
} }
}
if ( opt.overflow != null ) { if ( opt.overflow != null ) {
this.style.overflow = "hidden"; this.style.overflow = "hidden";
@ -211,7 +203,15 @@ jQuery.fn.extend({
val = prop[ p ]; val = prop[ p ];
if ( rfxtypes.test( val ) ) { if ( rfxtypes.test( val ) ) {
e[ val === "toggle" ? hidden ? "show" : "hide" : val ](); // Tracks whether to show or hide based on private
// data attached to the element
method = jQuery._data( this, "toggle" + p ) || (val === "toggle" ? hidden ? "show" : "hide" : 0);
if ( method ) {
jQuery._data( this, "toggle" + p, method === "show" ? "hide" : "show" );
e[ method ]();
} else {
e[ val ]();
}
} else { } else {
parts = rfxnum.exec( val ); parts = rfxnum.exec( val );
@ -254,6 +254,7 @@ jQuery.fn.extend({
this.each(function() { this.each(function() {
var timers = jQuery.timers, var timers = jQuery.timers,
i = timers.length; i = timers.length;
// clear marker counters if we know they won't be // clear marker counters if we know they won't be
if ( !gotoEnd ) { if ( !gotoEnd ) {
jQuery._unmark( true, this ); jQuery._unmark( true, this );
@ -263,6 +264,8 @@ jQuery.fn.extend({
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 );
} else {
timers[ i ].saveState();
} }
timers.splice( i, 1 ); timers.splice( i, 1 );
@ -396,17 +399,21 @@ 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;
t.saveState = function() {
if ( self.options.hide && jQuery._data( self.elem, "fxshow" + self.prop ) === undefined ) {
jQuery._data( self.elem, "fxshow" + self.prop, self.start );
}
};
if ( t() && jQuery.timers.push(t) && !timerId ) { if ( t() && jQuery.timers.push(t) && !timerId ) {
// Use requestAnimationFrame instead of setInterval if available // Use requestAnimationFrame instead of setInterval if available
@ -428,14 +435,20 @@ jQuery.fx.prototype = {
// Simple 'show' function // Simple 'show' function
show: function() { show: function() {
var dataShow = jQuery._data( this.elem, "fxshow" + this.prop );
// 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 ] = dataShow || 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 if ( dataShow !== undefined ) {
// This show is picking up where a previous hide or show left off
this.custom( this.cur(), dataShow );
} else {
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,7 +457,7 @@ 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._data( this.elem, "fxshow" + this.prop ) || jQuery.style( this.elem, this.prop );
this.options.hide = true; this.options.hide = true;
// Begin the animation // Begin the animation
@ -457,7 +470,7 @@ jQuery.fx.prototype = {
done = true, done = true,
elem = this.elem, elem = this.elem,
options = this.options, options = this.options,
i, n; p, n;
if ( gotoEnd || t >= options.duration + this.startTime ) { if ( gotoEnd || t >= options.duration + this.startTime ) {
this.now = this.end; this.now = this.end;
@ -466,8 +479,8 @@ jQuery.fx.prototype = {
options.animatedProperties[ this.prop ] = true; options.animatedProperties[ this.prop ] = true;
for ( i in options.animatedProperties ) { for ( p in options.animatedProperties ) {
if ( options.animatedProperties[i] !== true ) { if ( options.animatedProperties[ p ] !== true ) {
done = false; done = false;
} }
} }
@ -488,8 +501,11 @@ jQuery.fx.prototype = {
// Reset the properties, if the item has been hidden or shown // Reset the properties, if the item has been hidden or shown
if ( options.hide || options.show ) { if ( options.hide || options.show ) {
for ( var p in options.animatedProperties ) { for ( p in options.animatedProperties ) {
jQuery.style( elem, p, options.orig[ p ] ); jQuery.style( elem, p, options.orig[ p ] );
jQuery.removeData( elem, "fxshow" + p, true );
// Toggle data is no longer needed
jQuery.removeData( elem, "toggle" + p, true );
} }
} }
@ -521,7 +537,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 +569,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 +577,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 );
} }
@ -68,8 +70,7 @@ jQuery.extend({
type = type || "fx"; type = type || "fx";
var queue = jQuery.queue( elem, type ), var queue = jQuery.queue( elem, type ),
fn = queue.shift(), fn = queue.shift();
defer;
// If the fx queue is dequeued, always remove the progress sentinel // If the fx queue is dequeued, always remove the progress sentinel
if ( fn === "inprogress" ) { if ( fn === "inprogress" ) {

61
test/unit/effects.js vendored
View file

@ -676,23 +676,23 @@ jQuery.each( {
return ""; return "";
}, },
"JS 100": function( elem, prop ) { "JS 100": function( elem, prop ) {
jQuery(elem).css(prop,prop == "opacity" ? 1 : "100px"); jQuery( elem ).css( prop, prop === "opacity" ? 1 : "100px" );
return prop == "opacity" ? 1 : 100; return prop === "opacity" ? 1 : 100;
}, },
"CSS 50": function( elem, prop ) { "CSS 50": function( elem, prop ) {
jQuery( elem ).addClass( "med" + prop ); jQuery( elem ).addClass( "med" + prop );
return ""; return "";
}, },
"JS 50": function( elem, prop ) { "JS 50": function( elem, prop ) {
jQuery(elem).css(prop,prop == "opacity" ? 0.50 : "50px"); jQuery( elem ).css( prop, prop === "opacity" ? 0.50 : "50px" );
return prop == "opacity" ? 0.5 : 50; return prop === "opacity" ? 0.5 : 50;
}, },
"CSS 0": function( elem, prop ) { "CSS 0": function( elem, prop ) {
jQuery( elem ).addClass( "no" + prop ); jQuery( elem ).addClass( "no" + prop );
return ""; return "";
}, },
"JS 0": function( elem, prop ) { "JS 0": function( elem, prop ) {
jQuery(elem).css(prop,prop == "opacity" ? 0 : "0px"); jQuery( elem ).css( prop, prop === "opacity" ? 0 : "0px" );
return 0; return 0;
} }
}, function( fn, f ) { }, function( fn, f ) {
@ -750,22 +750,27 @@ jQuery.each( {
elem = elem[ 0 ]; elem = elem[ 0 ];
if ( t_w == "show" ) if ( t_w == "show" ) {
equals( elem.style.display, "block", "Showing, display should block: " + elem.style.display ); equals( elem.style.display, "block", "Showing, display should block: " + elem.style.display );
}
if ( t_w == "hide"||t_w == "show" ) if ( t_w == "hide" || t_w == "show" ) {
ok( f_w === "" ? elem.style.width === f_w : elem.style.width.indexOf( f_w ) === 0, "Width must be reset to " + f_w + ": " + elem.style.width ); ok( f_w === "" ? elem.style.width === f_w : elem.style.width.indexOf( f_w ) === 0, "Width must be reset to " + f_w + ": " + elem.style.width );
}
if ( t_h == "hide"||t_h == "show" ) if ( t_h == "hide" || t_h == "show" ) {
ok( f_h === "" ? elem.style.height === f_h : elem.style.height.indexOf( f_h ) === 0, "Height must be reset to " + f_h + ": " + elem.style.height ); ok( f_h === "" ? elem.style.height === f_h : elem.style.height.indexOf( f_h ) === 0, "Height must be reset to " + f_h + ": " + elem.style.height );
}
var cur_o = jQuery.style(elem, "opacity"); var cur_o = jQuery.style(elem, "opacity");
if ( t_o == "hide" || t_o == "show" ) if ( t_o == "hide" || t_o == "show" ) {
equals( cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o ); equals( cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o );
}
if ( t_w == "hide" ) if ( t_w == "hide" ) {
equals( elem.style.display, "none", "Hiding, display should be none: " + elem.style.display ); equals( elem.style.display, "none", "Hiding, display should be none: " + elem.style.display );
}
if ( t_o.constructor == Number ) { if ( t_o.constructor == Number ) {
equals( cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o ); equals( cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o );
@ -921,6 +926,42 @@ test("jQuery.show('fast') doesn't clear radio buttons (bug #1095)", function ()
}); });
}); });
jQuery.each({
"slideToggle": function( $elem ) {
return $elem.height();
},
"fadeToggle": function( $elem ) {
return $elem.css("opacity");
},
"toggle": function( $elem ) {
return $elem.width();
}
},
function( method, defProp ) {
test( method + "().stop()." + method + "()", function() {
expect( 4 );
jQuery.each([ "in", "out" ], function( i, type ) {
var $elem = jQuery( "#" + method.toLowerCase() + type ),
startVal = defProp( $elem );
$elem[ method ]("fast");
stop();
setTimeout( function() {
$elem.stop();
notEqual( defProp( $elem ), startVal, ".stop() is called about halfway through animation." );
$elem[ method ]("fast", function() {
equal( defProp( jQuery(this) ), startVal, "After doing .stop() halfway, check that state has been saved for returning to original property value." );
start();
});
}, 100);
});
});
});
test("animate with per-property easing", function(){ test("animate with per-property easing", function(){
expect(5); expect(5);