jquery - jQuery数字动画插件中的冲突动画

Question

我一直在研究一个 jQuery 插件，以在两个数值之间为元素的文本设置动画。jQuery 的 animate 函数强制您指定要设置动画的属性。在我的情况下，我基本上需要在每个动画步骤上调用 text() ，所以我必须做一些修改才能让它工作。

由于我没有以正常方式使用 animate() ，因此我将自己暴露在相互冲突的动画中，因为 jQuery 没有为我处理它。例如，如果我开始在 5 秒内将元素的文本设置为“500”，并立即开始在 1 秒内将相同元素的文本设置为“500000”，我会得到奇怪的结果，因为它们相互冲突。

一张图片值一千字，所以这里是 jsFiddle：http: //jsfiddle.net/XjrNC/

我的主要问题是：确保在开始新动画时停止以前的动画的最合适方法是什么。

我的第二个问题是：到目前为止，您对我的代码有何反馈？你会采取不同的方法吗？

谢谢。

score 1 · Accepted Answer

我只会分配 ID 而不是按类调用...这将使用您的代码，我在我的版本中进行了大量编辑，所以我什至不会这样做。

$(function() {
    $('#oneThousand').tweenText(500, 5000);
    $('#fiveThousand').tweenText(500000, 1000);
})

在您的代码中，我觉得tweenText 内部的 $.each不是很有用，IMO 应该在方法之外。这个概念是对指定的选择器执行此操作，而不是在方法中进行额外的选择。

另外，我强烈建议使用参数对象，而不是传递预定义的集合，那么不需要的参数可以作为 null 传递或直接忽略。

此外，我添加了一个回调函数，以便您可以设置在当前 tweenText 完成时运行的内容。

这是我的修改。

1 回答 1