Bug Tracker

Modify

Ticket #5001 (closed enhancement: wontfix)

Opened 5 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

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.

Change History

comment:1 Changed 5 years ago by dmethvin

Please provide a simple test case.

comment:2 Changed 4 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.

$('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>

comment:3 Changed 4 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 3 years ago by snover

  • Status changed from new to closed
  • Resolution set to wontfix

I think dmethvin nailed it in his previous comment.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.