Animate() issue with += on border-width

[samishii23]

Issue: When using animate() with "border-width" property, and using the "+=" operator, the width resets itself each function run. While the 1st property animate "width" gets added to and keeps getting longer while the border-width does not.

Works on IE 8 Platforms Effected: Chrome 14 Beta, Firefox 6.0.1, Safari 5.1, IE 9

​http://jsfiddle.net/samishii23/8pb42/

[samishii23]

Re-worded Edit: Works on: IE 8, but not on: Chrome 14 Beta, Firefox 6.0.1, Safari 5.1, IE 9

[dmethvin]

border-width is a shorthand property that takes the form 4px 4px 4px 4px for example, so it cannot be animated. You could animate border-right-width however, which is a single number.

[samishii23]

Replying to dmethvin:

border-width is a shorthand property that takes the form 4px 4px 4px 4px for example, so it cannot be animated. You could animate border-right-width however, which is a single number.

Hmm, true that is short hand. How ever, what I am saying, is that it does animate the change. But it does not animate the additive change. Thus, every time the animation occurs, the border width goes from 1px -> 11px. It does animate. Just not from 1 -> 11 -> 21 etc.