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.

Answer 1

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.