diff --git a/src/effects.js b/src/effects.js
index 523cd7d29..808635d01 100644
--- a/src/effects.js
+++ b/src/effects.js
@@ -620,7 +620,7 @@ jQuery.extend( jQuery.fx, {
 // 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) );
+		jQuery.style( fx.elem, prop, Math.max(0, fx.now) + fx.unit );
 	};
 });
 
diff --git a/test/unit/effects.js b/test/unit/effects.js
index 36335c43f..82067cb8b 100644
--- a/test/unit/effects.js
+++ b/test/unit/effects.js
@@ -324,6 +324,21 @@ test("animate table-cell width/height", function() {
 	});
 });
 
+test("animate percentage(%) on width/height", function() {
+	expect( 2 );
+
+	var $div = jQuery("<div style='position:absolute;top:-999px;left:-999px;width:60px;height:60px;'><div style='width:50%;height:50%;'></div></div>")
+		.appendTo("#qunit-fixture").children("div");
+
+	stop();
+	$div.animate({ width: "25%", height: "25%" }, 13, function() {
+		var $this = jQuery(this);
+		equal( $this.width(), 15, "Width was animated to 15px rather than 25px");
+		equal( $this.height(), 15, "Height was animated to 15px rather than 25px");
+		start();
+	});
+});
+
 test("animate resets overflow-x and overflow-y when finished", function() {
 	expect(2);
 	stop();