JQuery animation callback called before animation ends

Question

I am using slideDown animation to show some divs in a newly added table row:

$("div", newRow).slideDown(10000, UpdateHours(response.d.Hours));

however the UpdateHours() function is called long before the divs are finished animating. This is causing me a problem because the Updated Hours then get covered by the sliding divs.

I made the slide very slow to illustrate the issue better.

Answer 1

I think it's trying to pass the result of the call UpdateHours(response.d.Hours) as the callback function, which would explain why it is being called so soon. One solution would be to create an anonymous function that calls UpdateHours.

$("div", newRow).slideDown(10000, function () { UpdateHours(response.d.Hours) });

There is a demo for calling slideDown this way on the jQuery site. http://docs.jquery.com/Effects/slideDown

Answer 2

I think you want this:

$("div", newRow).slideDown(10000, function() { UpdateHours(response.d.Hours); });

This creates an anonymous function that will be called as a callback - what you're doing is setting the callback to be the return value of UpdateHours