1

我正在创建一个打地鼠风格的游戏，其中给出了一个总和，数字从容器底部到顶部动画。游戏的目的是点击总和的正确答案并收集尽可能多的正确答案。

我还添加了一些额外的图标，让游戏更有趣。其中一个图标是火焰，它可以将动画加速 5 秒。

目前，它使所有图标同时移动得非常快。我希望流程像往常一样继续，但速度更快，而不是发生这种情况。

这是我到目前为止所拥有的..

$(".character").click(clickThrottled(function () {
    if ($(this).hasClass("heat")) {
        $(this).effect("explode", 400);
        $("#container").children().css('top', '400px').fadeIn(1000).animate({
            'top': '-100px'
        }, 3000).fadeOut(1000);
    }
}));

有人可以告诉我哪里出错了吗？查看演示并单击火焰图标以更好地了解问题。

小提琴：http: //jsfiddle.net/pUwKb/52/

4

2 回答 2

2

缓动将使所有元素同时缓和到顶部，但以一种时尚的方式（就像它们最后放慢速度一样。）

您实际需要做的是保留一个名为“isFlameOn”或“speedModifier”的标志会更好。单击火焰图标时，将“speedModifier”设置为 2 或 3，这将使速度达到正常速度的两倍或三倍。

删除这个：

$("#container").children().css('top', '400px').fadeIn(1000).animate({
        'top': '-100px'
}, 3000).fadeOut(1000);

因为您将单独更改对象的速度。

现在到你管理每个图标的地方（移动它们），而不是说： item[i].y -= item[i].speed;

做 item[i].y -= item[i].speed * speedModifier;

如果您让它们动画到顶部，那么您将需要跟踪每个动画间隔并重置它们。因此，如果您创建一个项目然后对其进行 .animate 动画处理，您将需要删除该 .animate 效果并创建一个具有补偿的 speedModifier 百分比的新效果。如果您逐帧进行，您将度过轻松的一天:)。

当你想让火焰效果用完时，只需将 speedModifier 设置回 1。如果为每个项目设置动画，则需要再次删除当前的 .animate 并将其替换为正常速度。请务必跟踪每个项目的随机速度，以便在效果消失后您可以将其速度重置为原始速度。

于 2013-01-17T10:48:39.003 回答
1

查看jQuery UI 提供的不同缓动，它们应该可以解决您的问题。要使用它们，只需设置属性缓动animate（如果你需要更高级的，你还应该包括 jQuery UI）。

对于进一步的自定义，您可以step使用animate.

于 2013-01-17T10:27:50.730 回答