Effects: 1.8 Animation Rewrite - thanks @mikesherov and @gibson042

This commit is contained in:
Corey Frang 2012-04-23 15:05:12 -04:00 committed by Dave Methvin
parent 8ad22a2b15
commit 58ed62ed12
4 changed files with 651 additions and 579 deletions

View File

@ -1,10 +1,12 @@
(function( jQuery ) {
jQuery.cssExpand = [ "Top", "Right", "Bottom", "Left" ];
var ralpha = /alpha\([^)]*\)/i,
ropacity = /opacity=([^)]*)/,
// fixed for IE9, see #8346
rupper = /([A-Z]|^ms)/g,
rnum = /^[\-+]?(?:\d*\.)?\d+$/i,
rnumsplit = /^([\-+]?(?:\d*\.)?\d+)(.*)$/i,
rnumnonpx = /^-?(?:\d*\.)?\d+(?!px)[^\d\s]+$/i,
rrelNum = /^([\-+])=([\-+.\de]+)/,
rmargin = /^margin/,
@ -12,7 +14,7 @@ var ralpha = /alpha\([^)]*\)/i,
cssShow = { position: "absolute", visibility: "hidden", display: "block" },
// order is important!
cssExpand = [ "Top", "Right", "Bottom", "Left" ],
cssExpand = jQuery.cssExpand,
cssPrefixes = [ "O", "Webkit", "Moz", "ms" ],
curCSS;
@ -264,6 +266,13 @@ if ( document.defaultView && document.defaultView.getComputedStyle ) {
};
}
function setPositiveNumber( elem, value ) {
var matches = rnumsplit.exec( value );
return matches ?
Math.max( 0, matches[ 1 ] ) + ( matches [ 2 ] || "px" )
: value;
}
function getWidthOrHeight( elem, name, extra ) {
// Start with offset property, which is equivalent to the border-box value
@ -348,11 +357,7 @@ jQuery.each([ "height", "width" ], function( i, name ) {
}
},
set: function( elem, value ) {
return rnum.test( value ) ?
value + "px" :
value;
}
set: setPositiveNumber
};
});
@ -436,7 +441,6 @@ jQuery.each({
padding: "",
border: "Width"
}, function( prefix, suffix ) {
jQuery.cssHooks[ prefix + suffix ] = {
expand: function( value ) {
var i,
@ -453,6 +457,10 @@ jQuery.each({
return expanded;
}
};
if ( !rmargin.test( prefix ) ) {
jQuery.cssHooks[ prefix + suffix ].set = setPositiveNumber;
}
});
})( jQuery );

1137
src/effects.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -37,13 +37,13 @@ test("css(String|Hash)", function() {
div2.remove();
// handle negative numbers by ignoring #1599, #4216
// handle negative numbers by setting to zero #11604
jQuery("#nothiddendiv").css( {width: 1, height: 1} );
var width = parseFloat(jQuery("#nothiddendiv").css("width")), height = parseFloat(jQuery("#nothiddendiv").css("height"));
jQuery("#nothiddendiv").css({ width: -1, height: -1 });
equal( parseFloat(jQuery("#nothiddendiv").css("width")), width, "Test negative width ignored");
equal( parseFloat(jQuery("#nothiddendiv").css("height")), height, "Test negative height ignored");
equal( parseFloat(jQuery("#nothiddendiv").css("width")), 0, "Test negative width set to 0");
equal( parseFloat(jQuery("#nothiddendiv").css("height")), 0, "Test negative height set to 0");
equal( jQuery("<div style='display: none;'>").css("display"), "none", "Styles on disconnected nodes");

63
test/unit/effects.js vendored
View File

@ -792,7 +792,7 @@ jQuery.checkOverflowDisplay = function(){
start();
};
test( "jQuery.fx.prototype.cur()", 6, function() {
test( "jQuery.fx.prototype.cur() - <1.8 Back Compat", 7, function() {
var div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" ).css({
color: "#ABC",
border: "5px solid black",
@ -814,6 +814,8 @@ test( "jQuery.fx.prototype.cur()", 6, function() {
// backgroundPosition actually returns 0% 0% in most browser
// this fakes a "" return
// hook now gets called twice because Tween will grab the current
// value as it is being newed
jQuery.cssHooks.backgroundPosition = {
get: function() {
ok( true, "hook used" );
@ -1387,3 +1389,62 @@ test("animate will scale margin properties individually", function() {
});
start();
});
// Start 1.8 Animation tests
asyncTest( "jQuery.Animation( object, props, opts )", 1, function() {
var testObject = {
foo: 0,
bar: 1,
width: 100
},
testDest = {
foo: 1,
bar: 0,
width: 200
};
jQuery.Animation( testObject, testDest, { duration: 1 })
.done( function() {
deepEqual( testObject, testDest, "Animated foo and bar" );
start();
});
});
asyncTest( "Animate Option: step: function( percent, tween )", 1, function() {
var counter = {};
jQuery( "#foo" ).animate({
prop1: 1,
prop2: 2,
prop3: 3
}, {
duration: 1,
step: function( value, tween ) {
calls = counter[ tween.prop ] = counter[ tween.prop ] || [];
calls.push( value );
}
}).queue( function( next ) {
deepEqual( counter, {
prop1: [0, 1],
prop2: [0, 2],
prop3: [0, 3]
}, "Step function was called once at 0% and once at 100% for each property");
next();
start();
});
});
asyncTest( "Animate callbacks have correct context", 2, function() {
var foo = jQuery( "#foo" );
foo.animate({
height: 10
}, 10, function() {
equal( foo[ 0 ], this, "Complete callback after stop(true) `this` is element" );
}).stop( true, true );
foo.animate({
height: 100
}, 10, function() {
equal( foo[ 0 ], this, "Complete callback `this` is element" );
start();
});
});