Relative percentage values (+= / -=) work in .animate but not in .css

[[email protected]…]

.css({'left':'+=50%'})

...moves the item by 50 pixel instead of 50%, while

.animate({'left':'+=50%'})

...works as expected (adds 50%).

The docs suggest that .css and .animate should behave identically (​http://api.jquery.com/css/):

As of jQuery 1.6, .css() accepts relative values similar to .animate().

If "similar" should really mean "similar" but not identical, it would help to give a hint in the docs that relative percentage values are not supported by .css.

The problem shows up in current Chrome, Firefox and IE10.

Fiddle to reproduce: ​http://jsfiddle.net/2VGgg/

[timmywil]

This looks valid.

[francomalatacca]

Replying to [email protected]…:

.css({'left':'+=50%'})

The problem is that style function that is called by css function doesn't care about percentage. A fix could be by adding support for this by checking if there is the % symbol at the end of value. If so it should compute the percentage of the parent width. I fixed the bug with something

			if ( type === "string" && (ret = rrelNum.exec( value )) ) {
				// Fixes bug #14484
				if(!/[%$]/i.exec(value) ) {
					value = (( ret[1] + 1 ) *  ret[2]) + parseFloat( jQuery.css( elem, name ) );
				} else {
					value = parseFloat( jQuery.css( elem, name ) ) + (parseFloat(jQuery(elem).parent().css("width")) * (( ret[1] + 1 ) * ret[2]/100));
				}
				
				// Fixes bug #9237
				type = "number";
			}

Thanks. Franco

[anonymous]

This is reproducible for other unit "em"

There are other not so popular units like "cm","in" etc.

Need fix for them too

[m_gol]

Migrated to ​https://github.com/jquery/jquery/issues/1711