javascript - 如何在特定位置跟踪元素移动和触发功能？

Question

我有一个#ball，点击它时使用 jquery animate 使用此代码向下移动 210px:

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

目前我正在使用 Timeout 来触发下一个函数，即“crack”。相反，我想跟踪 #ball 的运动，当它的 css top = 210px 我想触发函数 crack()，我该怎么做？

我在一篇有点类似的帖子中看到，Step 函数可能是我正在寻找的，但我不确定如何根据 http://api.jquery.com/animate/ 提供的信息来处理该解决方案。

看演示:http://jsfiddle.net/EnigmaMaster/hbvev/4/

Answer 1

如果你知道球会在 210px 内到达盒子，我不确定你为什么要使用跟踪器。

如果您想摆脱 setTimeout，请使用 .animate 回调函数，当球到达盒子时将调用该回调函数。

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

DEMO

如果你想在球接触到盒子时调用 crack 并且仍然继续盒子的移动那么你可以像下面这样执行 2 个步骤，

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

另请查看此版本以享受慢动作的乐趣 http://jsfiddle.net/skram/hbvev/8/