Question

I have a #ball that when clicked uses jquery animate to move down 210px using this code:

 $('#ball').click(function() {
    $(this).animate({
        top: '+=210px'
    }, 500);
    setTimeout(crack, 400);
});​

currently Im using Timeout to trigger the next function which is “crack”.
Instead I want to track the movement of #ball and when its css top = 210px I want to trigger the function crack(), how can I do this?

I saw in a somewhat similar post that the Step function might be what I’m looking for, but I am not sure how to approach that solution based on the info provided at http://api.jquery.com/animate/

Look at Demo: http://jsfiddle.net/EnigmaMaster/hbvev/4/

Answer 1

I am not sure why you want to use a tracker if you know that the ball will reach the box in 210px.

If you want to get rid of setTimeout, then use the .animate callback function which will be called when the ball reaches the box.

$('#ball').click(function() {
    $(this).animate({
        top: '+=210px'
    }, 500, crack); //<== crack will be called after ball animation
});​

DEMO

Incase if you want to call crack when the ball touches the box and still continue the movement of box then you can execute it 2 steps like below,

$('#ball').click(function() {
    $(this).animate({
        top: '+=180px'
    }, 400, function() {
        crack();
        $(this).animate({
            top: '+=30px'
        }, 100);            
    });
});

Also check this version for fun in slow motion http://jsfiddle.net/skram/hbvev/8/