#5001 closed enhancement (wontfix)

Opened August 01, 2009 07:43PM UTC

Closed October 24, 2010 05:54AM UTC

Last modified March 13, 2012 05:46PM UTC

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:

Description

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.

Attachments (0)

Change History (4)

Changed August 02, 2009 07:52PM UTC by dmethvin comment:1

Please provide a simple test case.

Changed April 07, 2010 02:44AM UTC by pmw57 comment:2

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

Animating CSS Properties on page 52.

$('p').animate({
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

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function () {
    $('p').animate({
    padding: '20px',
    borderBottom: '3px solid #8f8f8f',
    borderRight: '3px solid #bfbfbf'
}, 2000);
});
</script>
</head>
<body> 
<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>
</body> 
</html>

Changed August 14, 2010 07:03PM UTC by dmethvin comment:3

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"

"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.

Changed October 24, 2010 05:54AM UTC by snover comment:4

resolution:	→ wontfix
status:	new → closed

I think dmethvin nailed it in his previous comment.

Side navigation