mirror of
https://github.com/jquery/jquery.git
synced 2024-11-23 02:54:22 +00:00
Animation state is tracked on toggled/stopped animations using the private data cache. Fixes #8685. See full commit message for more. Fixes #6641.
- Example: http://jsfiddle.net/timmywil/gqZL5/24/ - http://bugs.jquery.com/ticket/8685 - Check the completed timer has not been removed already so other timers do not get accidentally removed. Fixes #6641. - Style edits, code reductions, and optimizations for the effects module
This commit is contained in:
timmywil
parent
92405d4f5f
commit
1878885fb7
144
src/effects.js
vendored
144
src/effects.js
vendored
@ -117,7 +117,7 @@ jQuery.fn.extend({
|
||||
},
|
||||
|
||||
animate: function( prop, speed, easing, callback ) {
|
||||
var optall = jQuery.speed(speed, easing, callback);
|
||||
var optall = jQuery.speed( speed, easing, callback );
|
||||
|
||||
if ( jQuery.isEmptyObject( prop ) ) {
|
||||
return this.each( optall.complete, [ false ] );
|
||||
@ -137,9 +137,9 @@ jQuery.fn.extend({
|
||||
var opt = jQuery.extend( {}, optall ),
|
||||
isElement = this.nodeType === 1,
|
||||
hidden = isElement && jQuery(this).is(":hidden"),
|
||||
name, val, p,
|
||||
display, e,
|
||||
parts, start, end, unit;
|
||||
name, val, p, e,
|
||||
parts, start, end, unit,
|
||||
method;
|
||||
|
||||
// will store per property easing and be used to determine when an animation is complete
|
||||
opt.animatedProperties = {};
|
||||
@ -175,25 +175,17 @@ jQuery.fn.extend({
|
||||
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
|
||||
|
||||
// Set display property to inline-block for height/width
|
||||
// animations on inline elements that are having width/height
|
||||
// animated
|
||||
// animations on inline elements that are having width/height animated
|
||||
if ( jQuery.css( this, "display" ) === "inline" &&
|
||||
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";
|
||||
|
||||
} else {
|
||||
display = defaultDisplay( this.nodeName );
|
||||
|
||||
// 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;
|
||||
}
|
||||
this.style.zoom = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -207,8 +199,16 @@ jQuery.fn.extend({
|
||||
e = new jQuery.fx( this, opt, p );
|
||||
val = prop[ p ];
|
||||
|
||||
if ( rfxtypes.test(val) ) {
|
||||
e[ val === "toggle" ? hidden ? "show" : "hide" : val ]();
|
||||
if ( rfxtypes.test( 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 {
|
||||
parts = rfxnum.exec( val );
|
||||
@ -251,18 +251,21 @@ jQuery.fn.extend({
|
||||
this.each(function() {
|
||||
var timers = jQuery.timers,
|
||||
i = timers.length;
|
||||
|
||||
// clear marker counters if we know they won't be
|
||||
if ( !gotoEnd ) {
|
||||
jQuery._unmark( true, this );
|
||||
}
|
||||
while ( i-- ) {
|
||||
if ( timers[i].elem === this ) {
|
||||
if (gotoEnd) {
|
||||
if ( timers[ i ].elem === this ) {
|
||||
if ( gotoEnd ) {
|
||||
// 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 );
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -291,7 +294,7 @@ function clearFxNow() {
|
||||
function genFx( type, num ) {
|
||||
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;
|
||||
});
|
||||
|
||||
@ -300,9 +303,9 @@ function genFx( type, num ) {
|
||||
|
||||
// Generate shortcuts for custom animations
|
||||
jQuery.each({
|
||||
slideDown: genFx("show", 1),
|
||||
slideUp: genFx("hide", 1),
|
||||
slideToggle: genFx("toggle", 1),
|
||||
slideDown: genFx( "show", 1 ),
|
||||
slideUp: genFx( "hide", 1 ),
|
||||
slideToggle: genFx( "toggle", 1 ),
|
||||
fadeIn: { opacity: "show" },
|
||||
fadeOut: { opacity: "hide" },
|
||||
fadeToggle: { opacity: "toggle" }
|
||||
@ -314,15 +317,15 @@ jQuery.each({
|
||||
|
||||
jQuery.extend({
|
||||
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 ||
|
||||
jQuery.isFunction( speed ) && 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 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
|
||||
opt.old = opt.complete;
|
||||
@ -369,12 +372,12 @@ jQuery.fx.prototype = {
|
||||
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
|
||||
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 ];
|
||||
}
|
||||
|
||||
@ -392,17 +395,21 @@ jQuery.fx.prototype = {
|
||||
fx = jQuery.fx;
|
||||
|
||||
this.startTime = fxNow || createFxNow();
|
||||
this.start = from;
|
||||
this.end = to;
|
||||
this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
|
||||
this.now = this.start;
|
||||
this.now = this.start = from;
|
||||
this.pos = this.state = 0;
|
||||
this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
|
||||
|
||||
function t( gotoEnd ) {
|
||||
return self.step(gotoEnd);
|
||||
return self.step( gotoEnd );
|
||||
}
|
||||
|
||||
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 ) {
|
||||
timerId = setInterval( fx.tick, fx.interval );
|
||||
@ -411,14 +418,20 @@ jQuery.fx.prototype = {
|
||||
|
||||
// Simple '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
|
||||
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;
|
||||
|
||||
// Begin the animation
|
||||
// Make sure that we start at a small width/height to avoid any
|
||||
// flash of content
|
||||
this.custom(this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur());
|
||||
// Make sure that we start at a small width/height to avoid any 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() );
|
||||
}
|
||||
|
||||
// Start by showing the element
|
||||
jQuery( this.elem ).show();
|
||||
@ -427,11 +440,11 @@ jQuery.fx.prototype = {
|
||||
// Simple 'hide' function
|
||||
hide: function() {
|
||||
// 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;
|
||||
|
||||
// Begin the animation
|
||||
this.custom(this.cur(), 0);
|
||||
this.custom( this.cur(), 0 );
|
||||
},
|
||||
|
||||
// Each step of an animation
|
||||
@ -440,7 +453,7 @@ jQuery.fx.prototype = {
|
||||
done = true,
|
||||
elem = this.elem,
|
||||
options = this.options,
|
||||
i, n;
|
||||
p, n;
|
||||
|
||||
if ( gotoEnd || t >= options.duration + this.startTime ) {
|
||||
this.now = this.end;
|
||||
@ -449,8 +462,8 @@ jQuery.fx.prototype = {
|
||||
|
||||
options.animatedProperties[ this.prop ] = true;
|
||||
|
||||
for ( i in options.animatedProperties ) {
|
||||
if ( options.animatedProperties[i] !== true ) {
|
||||
for ( p in options.animatedProperties ) {
|
||||
if ( options.animatedProperties[ p ] !== true ) {
|
||||
done = false;
|
||||
}
|
||||
}
|
||||
@ -459,20 +472,23 @@ jQuery.fx.prototype = {
|
||||
// Reset the overflow
|
||||
if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {
|
||||
|
||||
jQuery.each( [ "", "X", "Y" ], function (index, value) {
|
||||
elem.style[ "overflow" + value ] = options.overflow[index];
|
||||
jQuery.each( [ "", "X", "Y" ], function( index, value ) {
|
||||
elem.style[ "overflow" + value ] = options.overflow[ index ];
|
||||
});
|
||||
}
|
||||
|
||||
// Hide the element if the "hide" operation was done
|
||||
if ( options.hide ) {
|
||||
jQuery(elem).hide();
|
||||
jQuery( elem ).hide();
|
||||
}
|
||||
|
||||
// Reset the properties, if the item has been hidden or shown
|
||||
if ( options.hide || options.show ) {
|
||||
for ( var p in options.animatedProperties ) {
|
||||
jQuery.style( elem, p, options.orig[p] );
|
||||
for ( p in options.animatedProperties ) {
|
||||
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 );
|
||||
}
|
||||
}
|
||||
|
||||
@ -491,8 +507,8 @@ jQuery.fx.prototype = {
|
||||
this.state = n / options.duration;
|
||||
|
||||
// Perform the easing function, defaults to swing
|
||||
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.pos = jQuery.easing[ options.animatedProperties[this.prop] ]( this.state, n, 0, 1, options.duration );
|
||||
this.now = this.start + ( (this.end - this.start) * this.pos );
|
||||
}
|
||||
// Perform the next step of the animation
|
||||
this.update();
|
||||
@ -504,9 +520,15 @@ jQuery.fx.prototype = {
|
||||
|
||||
jQuery.extend( jQuery.fx, {
|
||||
tick: function() {
|
||||
for ( var timers = jQuery.timers, i = 0 ; i < timers.length ; ++i ) {
|
||||
if ( !timers[i]() ) {
|
||||
timers.splice(i--, 1);
|
||||
var timer,
|
||||
timers = jQuery.timers,
|
||||
i = 0;
|
||||
|
||||
for ( ; i < timers.length; i++ ) {
|
||||
timer = timers[ i ];
|
||||
// Checks the timer has not already been removed
|
||||
if ( !timer() && timers[ i ] === timer ) {
|
||||
timers.splice( i--, 1 );
|
||||
}
|
||||
}
|
||||
|
||||
@ -536,7 +558,7 @@ jQuery.extend( jQuery.fx, {
|
||||
|
||||
_default: function( fx ) {
|
||||
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 {
|
||||
fx.elem[ fx.prop ] = fx.now;
|
||||
}
|
||||
@ -544,6 +566,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 ) {
|
||||
jQuery.expr.filters.animated = function( elem ) {
|
||||
return jQuery.grep(jQuery.timers, function( fn ) {
|
||||
|
||||
29
src/queue.js
29
src/queue.js
@ -4,15 +4,15 @@ function handleQueueMarkDefer( elem, type, src ) {
|
||||
var deferDataKey = type + "defer",
|
||||
queueDataKey = type + "queue",
|
||||
markDataKey = type + "mark",
|
||||
defer = jQuery.data( elem, deferDataKey, undefined, true );
|
||||
defer = jQuery._data( elem, deferDataKey );
|
||||
if ( defer &&
|
||||
( src === "queue" || !jQuery.data( elem, queueDataKey, undefined, true ) ) &&
|
||||
( src === "mark" || !jQuery.data( elem, markDataKey, undefined, true ) ) ) {
|
||||
( src === "queue" || !jQuery._data(elem, queueDataKey) ) &&
|
||||
( src === "mark" || !jQuery._data(elem, markDataKey) ) ) {
|
||||
// Give room for hard-coded callbacks to fire first
|
||||
// and eventually mark/queue something else on the element
|
||||
setTimeout( function() {
|
||||
if ( !jQuery.data( elem, queueDataKey, undefined, true ) &&
|
||||
!jQuery.data( elem, markDataKey, undefined, true ) ) {
|
||||
if ( !jQuery._data( elem, queueDataKey ) &&
|
||||
!jQuery._data( elem, markDataKey ) ) {
|
||||
jQuery.removeData( elem, deferDataKey, true );
|
||||
defer.resolve();
|
||||
}
|
||||
@ -25,7 +25,7 @@ jQuery.extend({
|
||||
_mark: function( elem, type ) {
|
||||
if ( elem ) {
|
||||
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 ) {
|
||||
type = type || "fx";
|
||||
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 ) {
|
||||
jQuery.data( elem, key, count, true );
|
||||
jQuery._data( elem, key, count );
|
||||
} else {
|
||||
jQuery.removeData( elem, key, true );
|
||||
handleQueueMarkDefer( elem, type, "mark" );
|
||||
@ -49,13 +49,15 @@ jQuery.extend({
|
||||
},
|
||||
|
||||
queue: function( elem, type, data ) {
|
||||
var q;
|
||||
if ( elem ) {
|
||||
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
|
||||
if ( data ) {
|
||||
if ( !q || jQuery.isArray(data) ) {
|
||||
q = jQuery.data( elem, type, jQuery.makeArray(data), true );
|
||||
q = jQuery._data( elem, type, jQuery.makeArray(data) );
|
||||
} else {
|
||||
q.push( data );
|
||||
}
|
||||
@ -68,8 +70,7 @@ jQuery.extend({
|
||||
type = type || "fx";
|
||||
|
||||
var queue = jQuery.queue( elem, type ),
|
||||
fn = queue.shift(),
|
||||
defer;
|
||||
fn = queue.shift();
|
||||
|
||||
// If the fx queue is dequeued, always remove the progress sentinel
|
||||
if ( fn === "inprogress" ) {
|
||||
@ -84,7 +85,7 @@ jQuery.extend({
|
||||
}
|
||||
|
||||
fn.call(elem, function() {
|
||||
jQuery.dequeue(elem, type);
|
||||
jQuery.dequeue( elem, type );
|
||||
});
|
||||
}
|
||||
|
||||
@ -121,7 +122,7 @@ jQuery.fn.extend({
|
||||
// Based off of the plugin by Clint Helfers, with permission.
|
||||
// http://blindsignals.com/index.php/2009/07/jquery-delay/
|
||||
delay: function( time, type ) {
|
||||
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
|
||||
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
|
||||
type = type || "fx";
|
||||
|
||||
return this.queue( type, function() {
|
||||
|
||||
242
test/unit/effects.js
vendored
242
test/unit/effects.js
vendored
@ -428,19 +428,19 @@ test("animate duration 0", function() {
|
||||
$elem.remove();
|
||||
});
|
||||
|
||||
test("animate hyphenated properties", function(){
|
||||
test("animate hyphenated properties", function() {
|
||||
expect(1);
|
||||
stop();
|
||||
|
||||
jQuery("#foo")
|
||||
.css("font-size", 10)
|
||||
.animate({"font-size": 20}, 200, function(){
|
||||
.animate({"font-size": 20}, 200, function() {
|
||||
equals( this.style.fontSize, "20px", "The font-size property was animated." );
|
||||
start();
|
||||
});
|
||||
});
|
||||
|
||||
test("animate non-element", function(){
|
||||
test("animate non-element", function() {
|
||||
expect(1);
|
||||
stop();
|
||||
|
||||
@ -453,28 +453,42 @@ test("animate non-element", function(){
|
||||
});
|
||||
|
||||
test("stop()", function() {
|
||||
expect(3);
|
||||
expect(4);
|
||||
stop();
|
||||
|
||||
var $foo = jQuery("#foo");
|
||||
var w = 0;
|
||||
$foo.hide().width(200).width();
|
||||
|
||||
$foo.animate({ width: "show" }, 1000);
|
||||
setTimeout(function(){
|
||||
$foo.hide().width(200)
|
||||
.animate({ width: "show" }, 1000);
|
||||
|
||||
setTimeout(function() {
|
||||
var nw = $foo.width();
|
||||
notEqual( nw, w, "An animation occurred " + nw + "px " + w + "px");
|
||||
$foo.stop();
|
||||
|
||||
nw = $foo.width();
|
||||
notEqual( nw, w, "Stop didn't reset the animation " + nw + "px " + w + "px");
|
||||
setTimeout(function(){
|
||||
setTimeout(function() {
|
||||
$foo.removeData();
|
||||
$foo.removeData(undefined, true);
|
||||
equals( nw, $foo.width(), "The animation didn't continue" );
|
||||
start();
|
||||
}, 100);
|
||||
}, 100);
|
||||
|
||||
var $one = jQuery("#fadein");
|
||||
var $two = jQuery("#show");
|
||||
$one.fadeTo(100, 0, function() {
|
||||
$one.stop();
|
||||
});
|
||||
setTimeout(function() {
|
||||
$two.fadeTo(100, 0, function() {
|
||||
equal( $two.css("opacity"), "0", "Stop does not interfere with animations on other elements (#6641)" );
|
||||
// Reset styles
|
||||
$one.add( $two ).css("opacity", "");
|
||||
});
|
||||
}, 50);
|
||||
});
|
||||
|
||||
test("stop() - several in queue", function() {
|
||||
@ -660,63 +674,63 @@ test("CSS Overflow and Display", function() {
|
||||
.animate({ opacity: 0.5 }, "slow", jQuery.checkOverflowDisplay);
|
||||
});
|
||||
|
||||
jQuery.each( {
|
||||
"CSS Auto": function(elem,prop){
|
||||
jQuery(elem).addClass("auto" + prop)
|
||||
.text("This is a long string of text.");
|
||||
jQuery.each({
|
||||
"CSS Auto": function( elem, prop ) {
|
||||
jQuery( elem ).addClass( "auto" + prop )
|
||||
.text( "This is a long string of text." );
|
||||
return "";
|
||||
},
|
||||
"JS Auto": function(elem,prop){
|
||||
jQuery(elem).css(prop,"")
|
||||
.text("This is a long string of text.");
|
||||
"JS Auto": function( elem, prop ) {
|
||||
jQuery( elem ).css( prop, "" )
|
||||
.text( "This is a long string of text." );
|
||||
return "";
|
||||
},
|
||||
"CSS 100": function(elem,prop){
|
||||
jQuery(elem).addClass("large" + prop);
|
||||
"CSS 100": function( elem, prop ) {
|
||||
jQuery( elem ).addClass( "large" + prop );
|
||||
return "";
|
||||
},
|
||||
"JS 100": function(elem,prop){
|
||||
jQuery(elem).css(prop,prop == "opacity" ? 1 : "100px");
|
||||
return prop == "opacity" ? 1 : 100;
|
||||
"JS 100": function( elem, prop ) {
|
||||
jQuery( elem ).css( prop, prop === "opacity" ? 1 : "100px" );
|
||||
return prop === "opacity" ? 1 : 100;
|
||||
},
|
||||
"CSS 50": function(elem,prop){
|
||||
jQuery(elem).addClass("med" + prop);
|
||||
"CSS 50": function( elem, prop ) {
|
||||
jQuery( elem ).addClass( "med" + prop );
|
||||
return "";
|
||||
},
|
||||
"JS 50": function(elem,prop){
|
||||
jQuery(elem).css(prop,prop == "opacity" ? 0.50 : "50px");
|
||||
return prop == "opacity" ? 0.5 : 50;
|
||||
"JS 50": function( elem, prop ) {
|
||||
jQuery( elem ).css( prop, prop === "opacity" ? 0.50 : "50px" );
|
||||
return prop === "opacity" ? 0.5 : 50;
|
||||
},
|
||||
"CSS 0": function(elem,prop){
|
||||
jQuery(elem).addClass("no" + prop);
|
||||
"CSS 0": function( elem, prop ) {
|
||||
jQuery( elem ).addClass( "no" + prop );
|
||||
return "";
|
||||
},
|
||||
"JS 0": function(elem,prop){
|
||||
jQuery(elem).css(prop,prop == "opacity" ? 0 : "0px");
|
||||
"JS 0": function( elem, prop ) {
|
||||
jQuery( elem ).css( prop, prop === "opacity" ? 0 : "0px" );
|
||||
return 0;
|
||||
}
|
||||
}, function( fn, f ) {
|
||||
jQuery.each({
|
||||
"show": function(elem,prop){
|
||||
jQuery(elem).hide().addClass("wide"+prop);
|
||||
"show": function( elem, prop ) {
|
||||
jQuery( elem ).hide( ).addClass( "wide" + prop );
|
||||
return "show";
|
||||
},
|
||||
"hide": function(elem,prop){
|
||||
jQuery(elem).addClass("wide"+prop);
|
||||
"hide": function( elem, prop ) {
|
||||
jQuery( elem ).addClass( "wide" + prop );
|
||||
return "hide";
|
||||
},
|
||||
"100": function(elem,prop){
|
||||
jQuery(elem).addClass("wide"+prop);
|
||||
"100": function( elem, prop ) {
|
||||
jQuery( elem ).addClass( "wide" + prop );
|
||||
return prop == "opacity" ? 1 : 100;
|
||||
},
|
||||
"50": function(elem,prop){
|
||||
"50": function( elem, prop ) {
|
||||
return prop == "opacity" ? 0.50 : 50;
|
||||
},
|
||||
"0": function(elem,prop){
|
||||
jQuery(elem).addClass("noback");
|
||||
"0": function( elem, prop ) {
|
||||
jQuery( elem ).addClass( "noback" );
|
||||
return 0;
|
||||
}
|
||||
}, function(tn, t){
|
||||
}, function( tn, t ) {
|
||||
test(fn + " to " + tn, function() {
|
||||
var elem = jQuery.makeTest( fn + " to " + tn );
|
||||
|
||||
@ -735,35 +749,44 @@ jQuery.each( {
|
||||
|
||||
if ( t_h == "show" ) num++;
|
||||
if ( t_w == "show" ) num++;
|
||||
if ( t_w == "hide"||t_w == "show" ) num++;
|
||||
if ( t_h == "hide"||t_h == "show" ) num++;
|
||||
if ( t_o == "hide"||t_o == "show" ) num++;
|
||||
if ( t_w == "hide" || t_w == "show" ) num++;
|
||||
if ( t_h == "hide" || t_h == "show" ) num++;
|
||||
if ( t_o == "hide" || t_o == "show" ) num++;
|
||||
if ( t_w == "hide" ) num++;
|
||||
if ( t_o.constructor == Number ) num += 2;
|
||||
if ( t_w.constructor == Number ) num += 2;
|
||||
if ( t_h.constructor == Number ) num +=2;
|
||||
|
||||
expect(num);
|
||||
expect( num );
|
||||
stop();
|
||||
|
||||
var anim = { width: t_w, height: t_h, opacity: t_o };
|
||||
|
||||
elem.animate(anim, 50);
|
||||
|
||||
jQuery.when( elem ).done(function( elem ){
|
||||
jQuery.when( elem ).done(function( elem ) {
|
||||
|
||||
elem = elem[ 0 ];
|
||||
|
||||
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" ) {
|
||||
// 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" ) {
|
||||
// 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);
|
||||
equals( elem.style.display, "block", "Showing, display should block: " + elem.style.display );
|
||||
}
|
||||
|
||||
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);
|
||||
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 );
|
||||
}
|
||||
|
||||
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);
|
||||
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 );
|
||||
}
|
||||
|
||||
var cur_o = jQuery.style(elem, "opacity");
|
||||
@ -782,49 +805,56 @@ jQuery.each( {
|
||||
cur_o = 1;
|
||||
}
|
||||
|
||||
// if ( t_o == "hide" || t_o == "show" ) {
|
||||
// equals(cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o);
|
||||
// }
|
||||
|
||||
// if ( t_w == "hide" ) {
|
||||
// equals(elem.style.display, "none", "Hiding, display should be none: " + elem.style.display);
|
||||
|
||||
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" ) {
|
||||
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 ) {
|
||||
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 );
|
||||
|
||||
ok(jQuery.css(elem, "opacity") != "" || cur_o == t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o);
|
||||
ok( jQuery.css(elem, "opacity") != "" || cur_o == t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o );
|
||||
}
|
||||
|
||||
if ( t_w.constructor == Number ) {
|
||||
equals(elem.style.width, t_w + "px", "Final width should be " + t_w + ": " + elem.style.width);
|
||||
equals( elem.style.width, t_w + "px", "Final width should be " + t_w + ": " + elem.style.width );
|
||||
|
||||
var cur_w = jQuery.css(elem,"width");
|
||||
var cur_w = jQuery.css( elem,"width" );
|
||||
|
||||
ok(elem.style.width != "" || cur_w == t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w);
|
||||
ok( elem.style.width != "" || cur_w == t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w );
|
||||
}
|
||||
|
||||
if ( t_h.constructor == Number ) {
|
||||
equals(elem.style.height, t_h + "px", "Final height should be " + t_h + ": " + elem.style.height);
|
||||
equals( elem.style.height, t_h + "px", "Final height should be " + t_h + ": " + elem.style.height );
|
||||
|
||||
var cur_h = jQuery.css(elem,"height");
|
||||
var cur_h = jQuery.css( elem,"height" );
|
||||
|
||||
ok(elem.style.height != "" || cur_h == t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w);
|
||||
ok( elem.style.height != "" || cur_h == t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w );
|
||||
}
|
||||
|
||||
if ( t_h == "show" ) {
|
||||
var old_h = jQuery.css(elem, "height");
|
||||
jQuery(elem).append("<br/>Some more text<br/>and some more...");
|
||||
var old_h = jQuery.css( elem, "height" );
|
||||
jQuery( elem ).append("<br/>Some more text<br/>and some more...");
|
||||
|
||||
if ( /Auto/.test( fn ) ) {
|
||||
notEqual(jQuery.css(elem, "height"), old_h, "Make sure height is auto.");
|
||||
notEqual( jQuery.css( elem, "height" ), old_h, "Make sure height is auto." );
|
||||
} else {
|
||||
equals(jQuery.css(elem, "height"), old_h, "Make sure height is not auto.");
|
||||
equals( jQuery.css( elem, "height" ), old_h, "Make sure height is not auto." );
|
||||
}
|
||||
}
|
||||
|
||||
// manually remove generated element
|
||||
jQuery(elem).remove();
|
||||
jQuery( elem ).remove();
|
||||
|
||||
start();
|
||||
});
|
||||
@ -832,7 +862,7 @@ jQuery.each( {
|
||||
});
|
||||
});
|
||||
|
||||
jQuery.fn.saveState = function(hiddenOverflow){
|
||||
jQuery.fn.saveState = function( hiddenOverflow ) {
|
||||
var check = ["opacity", "height", "width", "display", "overflow"];
|
||||
expect(check.length);
|
||||
|
||||
@ -840,83 +870,83 @@ jQuery.fn.saveState = function(hiddenOverflow){
|
||||
return this.each(function(){
|
||||
var self = this;
|
||||
self.save = {};
|
||||
jQuery.each(check, function(i,c){
|
||||
self.save[c] = c === "overflow" && hiddenOverflow ? "hidden" : self.style[ c ] || jQuery.css(self,c);
|
||||
jQuery.each(check, function( i, c ) {
|
||||
self.save[ c ] = c === "overflow" && hiddenOverflow ? "hidden" : self.style[ c ] || jQuery.css( self, c );
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
jQuery.checkState = function(){
|
||||
jQuery.checkState = function() {
|
||||
var self = this;
|
||||
jQuery.each(this.save, function(c,v){
|
||||
var cur = self.style[ c ] || jQuery.css(self, c);
|
||||
jQuery.each(this.save, function( c, v ) {
|
||||
var cur = self.style[ c ] || jQuery.css( self, c );
|
||||
equals( cur, v, "Make sure that " + c + " is reset (Old: " + v + " Cur: " + cur + ")");
|
||||
});
|
||||
|
||||
// manually clean data on modified element
|
||||
jQuery.removeData(this, "olddisplay", true);
|
||||
jQuery.removeData( this, "olddisplay", true );
|
||||
|
||||
start();
|
||||
};
|
||||
|
||||
// Chaining Tests
|
||||
test("Chain fadeOut fadeIn", function() {
|
||||
jQuery("#fadein div").saveState().fadeOut("fast").fadeIn("fast",jQuery.checkState);
|
||||
jQuery("#fadein div").saveState().fadeOut("fast").fadeIn("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain fadeIn fadeOut", function() {
|
||||
jQuery("#fadeout div").saveState().fadeIn("fast").fadeOut("fast",jQuery.checkState);
|
||||
jQuery("#fadeout div").saveState().fadeIn("fast").fadeOut("fast", jQuery.checkState );
|
||||
});
|
||||
|
||||
test("Chain hide show", function() {
|
||||
jQuery("#show div").saveState(jQuery.support.shrinkWrapBlocks).hide("fast").show("fast",jQuery.checkState);
|
||||
jQuery("#show div").saveState( jQuery.support.shrinkWrapBlocks ).hide("fast").show("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain show hide", function() {
|
||||
jQuery("#hide div").saveState(jQuery.support.shrinkWrapBlocks).show("fast").hide("fast",jQuery.checkState);
|
||||
jQuery("#hide div").saveState( jQuery.support.shrinkWrapBlocks ).show("fast").hide("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain show hide with easing and callback", function() {
|
||||
jQuery("#hide div").saveState().show("fast").hide("fast","linear",jQuery.checkState);
|
||||
jQuery("#hide div").saveState().show("fast").hide("fast","linear", jQuery.checkState );
|
||||
});
|
||||
|
||||
test("Chain toggle in", function() {
|
||||
jQuery("#togglein div").saveState(jQuery.support.shrinkWrapBlocks).toggle("fast").toggle("fast",jQuery.checkState);
|
||||
jQuery("#togglein div").saveState( jQuery.support.shrinkWrapBlocks ).toggle("fast").toggle("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain toggle out", function() {
|
||||
jQuery("#toggleout div").saveState(jQuery.support.shrinkWrapBlocks).toggle("fast").toggle("fast",jQuery.checkState);
|
||||
jQuery("#toggleout div").saveState( jQuery.support.shrinkWrapBlocks ).toggle("fast").toggle("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain toggle out with easing and callback", function() {
|
||||
jQuery("#toggleout div").saveState(jQuery.support.shrinkWrapBlocks).toggle("fast").toggle("fast","linear",jQuery.checkState);
|
||||
jQuery("#toggleout div").saveState( jQuery.support.shrinkWrapBlocks ).toggle("fast").toggle("fast","linear", jQuery.checkState );
|
||||
});
|
||||
test("Chain slideDown slideUp", function() {
|
||||
jQuery("#slidedown div").saveState(jQuery.support.shrinkWrapBlocks).slideDown("fast").slideUp("fast",jQuery.checkState);
|
||||
jQuery("#slidedown div").saveState( jQuery.support.shrinkWrapBlocks ).slideDown("fast").slideUp("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain slideUp slideDown", function() {
|
||||
jQuery("#slideup div").saveState(jQuery.support.shrinkWrapBlocks).slideUp("fast").slideDown("fast",jQuery.checkState);
|
||||
jQuery("#slideup div").saveState( jQuery.support.shrinkWrapBlocks ).slideUp("fast").slideDown("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain slideUp slideDown with easing and callback", function() {
|
||||
jQuery("#slideup div").saveState(jQuery.support.shrinkWrapBlocks).slideUp("fast").slideDown("fast","linear",jQuery.checkState);
|
||||
jQuery("#slideup div").saveState( jQuery.support.shrinkWrapBlocks ).slideUp("fast").slideDown("fast","linear", jQuery.checkState );
|
||||
});
|
||||
|
||||
test("Chain slideToggle in", function() {
|
||||
jQuery("#slidetogglein div").saveState(jQuery.support.shrinkWrapBlocks).slideToggle("fast").slideToggle("fast",jQuery.checkState);
|
||||
jQuery("#slidetogglein div").saveState( jQuery.support.shrinkWrapBlocks ).slideToggle("fast").slideToggle("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain slideToggle out", function() {
|
||||
jQuery("#slidetoggleout div").saveState(jQuery.support.shrinkWrapBlocks).slideToggle("fast").slideToggle("fast",jQuery.checkState);
|
||||
jQuery("#slidetoggleout div").saveState( jQuery.support.shrinkWrapBlocks ).slideToggle("fast").slideToggle("fast", jQuery.checkState );
|
||||
});
|
||||
|
||||
test("Chain fadeToggle in", function() {
|
||||
jQuery("#fadetogglein div").saveState().fadeToggle("fast").fadeToggle("fast",jQuery.checkState);
|
||||
jQuery("#fadetogglein div").saveState().fadeToggle("fast").fadeToggle("fast", jQuery.checkState );
|
||||
});
|
||||
test("Chain fadeToggle out", function() {
|
||||
jQuery("#fadetoggleout div").saveState().fadeToggle("fast").fadeToggle("fast",jQuery.checkState);
|
||||
jQuery("#fadetoggleout div").saveState().fadeToggle("fast").fadeToggle("fast", jQuery.checkState );
|
||||
});
|
||||
|
||||
test("Chain fadeTo 0.5 1.0 with easing and callback)", function() {
|
||||
jQuery("#fadeto div").saveState().fadeTo("fast",0.5).fadeTo("fast",1.0,"linear",jQuery.checkState);
|
||||
jQuery("#fadeto div").saveState().fadeTo("fast",0.5).fadeTo("fast",1.0,"linear", jQuery.checkState );
|
||||
});
|
||||
|
||||
jQuery.makeTest = function( text ){
|
||||
var elem = jQuery("<div></div>")
|
||||
.attr("id", "test" + jQuery.makeTest.id++)
|
||||
.attr( "id", "test" + jQuery.makeTest.id++ )
|
||||
.addClass("box");
|
||||
|
||||
jQuery("<h4></h4>")
|
||||
@ -944,6 +974,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(){
|
||||
|
||||
expect(5);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user