Skip to main content

Bug Tracker

Side navigation

#10259 closed bug (wontfix)

Opened September 12, 2011 09:07PM UTC

Closed September 19, 2011 04:08PM UTC

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: unfiledcss
priority: undecidedlow
resolution: → wontfix
status: newclosed