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.