Animate() issue with += on border-width

Reported by:	samishii23	Owned by:
Priority:	low	Milestone:	None
Component:	css	Version:	1.6.3
Keywords:		Cc:
Blocked by:		Blocking:

Description

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/

Attachments (0)

Change History (4)

Changed September 12, 2011 09:10PM UTC by samishii23 comment:1

Re-worded Edit:

Works on: ''IE 8'', but not on: ''Chrome 14 Beta, Firefox 6.0.1, Safari 5.1, IE 9''

Changed September 12, 2011 09:43PM UTC by dmethvin comment:2

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.

Changed September 12, 2011 09:58PM UTC by samishii23 comment:3

_comment0:	Replying to [comment:2 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 animates the change. But it does not animate the additive change. Thus, every time the animation occurs the border width goes from 1px -> 11px. It animates. just not from 1 -> 11 -> 21 etc. → 1315883695700884
_comment1:	Replying to [comment:2 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 animates 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 animates. Just not from 1 -> 11 -> 21 etc. → 1315883712802289
_comment2:	Replying to [comment:2 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 animates 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. → 1315966474087326

Replying to [comment:2 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.

Changed September 19, 2011 04:08PM UTC by rwaldron comment:4

component:	unfiled → css
priority:	undecided → low
resolution:	→ wontfix
status:	new → closed

Side navigation