Skip to main content

Bug Tracker

Side navigation

#11684 closed bug (invalid)

Opened May 02, 2012 03:05PM UTC

Closed May 02, 2012 03:41PM UTC

jQuery Animate doesn't work with multiple CSS properties

Reported by: Andy S Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (1)

Changed May 02, 2012 03:41PM UTC by dmethvin comment:1

resolution: → invalid
status: newclosed

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.