Question

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

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

目前我正在使用Timeout来触发下一个“破解”的功能。相反，我想跟踪#ball的移动，当它的css top = 210px时，我想触发函数crack（），我该怎么做？

我在一篇有点类似的帖子中看到Step功能可能正是我正在寻找的，但我不知道如何根据http://api.jquery.com/animate/提供的信息来解决该问题

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

Answer 1

如果你真的想根据球的位置做某事，那么是的，step可能是最好的选择：

$('#ball').click(function() {
    $(this).animate({
        top: '+=210px'
    }, {
        duration: 500,
        step: function() {
            if($(this).offset().top > 208) {
                 crack();
            }                
        }
    });
});

演示：http://jsfiddle.net/qJjnN/1/

现在，有几点需要注意：

可能会受到影响。
每个步骤的位置不一定是整数，并且在开始和停止位置之间的每个像素处都不存在对象。
step未在最终位置被调用，因此如果它是最终位置，您无法实际检查210。

考虑到这些，您将无法检查210px的确切位置。相反，您需要观察它何时通过某个位置并且仅在该点触发crack而不是在以后的每个点触发：

$('#ball').click(function() {
    var cracked = false;
    $(this).animate({
        top: '+=210px'
    }, {
        duration: 500,
        step: function() {
            if($(this).offset().top > 208 && !cracked) {
                 cracked = true;
                 crack();
            }                
        }
    });
});

演示：http://jsfiddle.net/qJjnN/2/

step函数还有参数now和fx，可用于查看动画css的当前值。为每个动画的css属性的每一步调用step。因此，您必须小心使用它们，因为您需要查看fx以查看您正在查看的属性值（如果您要设置多个动画，即top和{{1} }）。

left

Answer 2

如果您知道球将会到达210px中的方框，我不确定您为什么要使用智能设备。

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

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

DEMO

如果你想在球接触盒子时调用破解并且仍然继续移动盒子然后你可以执行它，如下所示2步，

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

同时检查此版本是否有助于慢动作http://jsfiddle.net/skram/hbvev/8/

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

2 个答案: