2

我有一个#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/

4

2 回答 2

1

如果您真的想根据球的位置做某事，那么是的，step这可能是最好的方法：

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

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

现在，有几个警告：

  1. 可能会对性能造成影响。
  2. 每一步的位置不一定是整数，并且在开始和停止位置之间的每个像素处都不会存在对象。
  3. 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 的当前值。 step被动画的每个 css 属性的每一步调用。因此，您必须小心使用它们，因为您需要查看fx您正在查看的属性值（如果您正在制作多个动画，即top和left）。

$('#ball').click(function() {
    var cracked = false;
    $(this).animate({
        top: '+=210px'
    }, {
        duration: 500,
        step: function(now, fx) {
            if(fx.prop != 'top') {
                 return;
            }
            if(now > 208 && !cracked) {
                 cracked = true;
                 crack();
            }                
        }
    });
});
于 2012-04-24T17:15:53.600 回答
1

如果您知道球会到达210px.

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

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

演示

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

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

还要检查这个版本的慢动作乐趣http://jsfiddle.net/skram/hbvev/8/

于 2012-04-24T17:30:52.360 回答