Bug Tracker

Opened 7 years ago

Closed 7 years ago

#11684 closed bug (invalid)

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.

Change History (1)

comment:1 Changed 7 years ago by dmethvin

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.

Note: See TracTickets for help on using tickets.