Passing dynamic CSS to jQuery.animate

Question

The documentation of jQuery.animate states that

The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

So, why does this work

$('#con div').css( {
        top : function(i) {
            console.log(i);
            return (i * 500) + 'px';
        }
    }
);

and this doesn't?

$('#con div').animate( {
        top : function(i) {
            console.log(i);
            return (i * 500) + 'px';
        }
    }
);

The console shows that the function is being evaluated for css, but not for animate. Am I missing something?

By the way, I'm using 1.4.2.

From reading the doc, it appears that the animate function is restrictive in the css map. It allows only numeric values and some special exceptions. I'm sure you read that too, but I wonder if that means it won't allow a function because it can't check the type. Just speculating. Might be time to look at the code because I can't find anything on this. — neuroguy123
– neuroguy123, Commented Apr 7, 2010 at 16:16

Will Vousden · Accepted Answer · 2010-04-07 16:54:48Z

2

This may not be what you're after, but a simple solution would be simply to iterate over the elements and apply the animations individually:

$('#con div').each(function(i)
{
    $(this).animate({ top: i * 500 });
});

This is essentially what your snippet amounts to, after all.

answered Apr 7, 2010 at 16:54

Will Vousden

33.5k9 gold badges89 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

harpo Over a year ago

Thanks, this works great! I just started with jQuery.animate, and didn't think this would cause simultaneous animations.

Collectives™ on Stack Overflow

Passing dynamic CSS to jQuery.animate

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related