jQuery Animate doesn't work with multiple CSS properties

[Andy S]

From Chapter 3 Example 3/01 in jQuery Novice to Ninja:

$('p').animate({ padding: '20px', borderBottom: '3px solid #8f8f8f', borderRight: '3px solid #bfbfbf' }, 2000);

The above only applies the first CSS property, padding, to the paragraph elements in neither IE8 nor FireFox; checking using FireBug shows that only the padding: 20px is added.

Checked back through versions of jQuery and this works absolutely fine with 1.4.4, but not any latter versions right up to and including 1.7.2.

Tried changing the code of the example to match the format of that given in the API documentation for Animate, but stilll got the same result.

[dmethvin]

 All animated properties should be animated to a single numeric value...

this works absolutely fine with 1.4.4

No it doesn't, it's just animating the padding and border widths (not the style or color):

 http://jsfiddle.net/dmethvin/kK4JQ/

If you just want to animate the border width, use borderRightWidth etc. Use the jquery-color plugin to animate colors.