Bug Tracker

Opened 8 years ago

Closed 7 years ago

Last modified 5 years ago

#5001 closed enhancement (wontfix)

jQuery fails to animate sertain CSS rules - IE mostly

Reported by: Tokimon Owned by:
Priority: minor Milestone: 1.4
Component: effects Version: 1.3.2
Keywords: animation, css, animateToClass Cc:
Blocked by: Blocking:


Im Building a component equilevant to animateToClass and in this component, im grabbing every rule, that might be animatable (from my point of view) and sending it to the animate method. However IE tends to fail on a large number of rules im trying to animate, as some don't have any 'px' in their declaration. And some just fails in the minified version of jQuery, where IE just states 'Invalid argument' - i've experienced this mainly on the postions rules (top right bottom left).

It seeems that there is a glich in the way rules are parsed if it's a rule without any unit declaration in it - like z-index or font-weight -, it get fails the declaration.

Furthermore it seems to miss the interpreation on the clip rule.

Below is a list of rules IE is failing on:

borderColor, borderWidth, bottom, clip, fontWeight, left, letterSpacing, lineHeight, maxHeight, maxWidth, minHeight, minWidth, outlineColor, outlineWidth, right, textShadow, top, verticalAlign, wordSpacing, zIndex, outlineOffset

A suregestion is that the animation method would be able to take any of the css rules and not just the animatable ones, so that you just throw any rule at it without having to consider whether it might be suitable to animation or not.

PS. i worked around some of the errors with a try-catch clause but i know that probably not the best way to do things.

Change History (4)

comment:1 Changed 8 years ago by dmethvin

Please provide a simple test case.

comment:2 Changed 7 years ago by pmw57

Here is a simple test case, from a code sample in the book jQuery Novice to Ninja.

Animating CSS Properties on page 52.

padding: '20px',
borderBottom: '3px solid #8f8f8f',
borderRight: '3px solid #bfbfbf'
}, 2000);

The book doesn't report this as a problem, but shows the code as an example of the animate function. People who use the sample code on IE all experience the fault.

The expected behaviour is for the padding and border to animate and change their size.

The unexpected behaviour that IE exhibits is that only the first matching element animates. The remaining matching elements do not animate.

Additionally, IE reports the following script error, even when only one paragraph is on the page.

Message: Invalid argument.
Line: 137
Char: 354
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Full test code is as follows

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
$(function () {
    padding: '20px',
    borderBottom: '3px solid #8f8f8f',
    borderRight: '3px solid #bfbfbf'
}, 2000);
<p>This paragraph animates just fine, because it is the first paragraph.</p>
<p>This paragraph fails to animate in Internet Explorer, due to an "invalid argument" jQuery error.</p>

comment:3 Changed 7 years ago by dmethvin

As documented at api.jquery.com, you can only animate simple numeric properties like border-bottom-width, not shorthand properties. (jQuery UI can animate color values.) It's unfortunate the book implied otherwise but out of our control.

This is filed as an enhancement request but it's a pretty complex and hard-to-describe enhancement. Imagine animating the border-bottom shorthand property from "4px solid #2415ff" to "10px inset #3b009c" for example. Just parsing the three components so they can be assigned to the correct breakout properties (border-bottom-width, border-bottom-style, border-bottom-color) seems pretty complex. And I don't know how to animate a border from solid to inset.

Given the complexity of the problem it seems like this would best be handled in a plugin so everyone wouldn't be taxed for it.

comment:4 Changed 7 years ago by snover

Resolution: wontfix
Status: newclosed

I think dmethvin nailed it in his previous comment.

Note: See TracTickets for help on using tickets.