每次单独的动画到达某个位置时运行和重置动画？答案

【问题标题】：Running and resetting an animation each time a seperate animation reaches a position?每次单独的动画到达某个位置时运行和重置动画？
【发布时间】：2014-09-23 21:42:26
【问题描述】：

（这似乎应该是相当基本的，但我不知道如何处理它。）

简而言之，每当 img（FB 徽标之一）为 -20 或更远时，我希望出现“灰尘”动画，以创建每当徽标碰到页脚扬起一团灰尘。

我可以轻松地让动画出现一次，但需要帮助才能让它出现多次。（会为此推荐碰撞检测吗？我想我还需要重置位置和不透明度。this 会以某种方式适应吗？）

这是基本想法的 gif 图像： http://i.imgur.com/vu8eTlp.gif

以下是当前发生的情况： http://jsfiddle.net/x6dferhh/4/

step: function(img, tween) {

                if (img > -20 ) {
                    $("#"+ link.data("dust")).attr('src', 'http://i.imgur.com/oTZ9G9Z.png');
                    $("#"+ link.data("dust")).animate({
                        top: '-150',
                        opacity: '0'
                    }, 500);
                } 
            }

【问题讨论】：

标签： javascript jquery animation jquery-animate reset

【解决方案1】：

看起来我所要做的就是重置 CSS 以基本上得到我想要的。

if (now > -5) {
    $("#"+ link.data("dust")).css('top', '0');
    $("#"+ link.data("dust")).css('opacity', '1');
    $("#"+ link.data("dust")).animate({
        top: '-50px',
        opacity: '0',
    }, randomTime/5);
}

【讨论】：

【解决方案2】：

您要做的是添加一个回调，当“灰尘”动画完成时执行。

function settleDust () {
  // reset the animation for next time
}

$("#"+ link.data("dust")).animate({
  top: '-150',
  opacity: '0'
}, 500, settleDust);

查看 jQuery.animate 文档： http://api.jquery.com/animate/#basic-usage

【讨论】：

将函数超过持续时间是否也被视为回调函数？像}, 500, function() { console.log("d");} 出于某种原因complete 无法识别我输入的任何内容，但持续时间后的功能可以识别。（奇怪）
@Terf 根据文档，它看起来应该也可以。我会更新我的答案
我想我知道我想在下面做什么。（但是，直到明天我才能将其标记为答案。）