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

Question

我一直在开发一个 jQuery 插件，用于在两个数值之间对元素的文本进行动画处理。 jQuery 的 animate 函数强制您指定要设置动画的属性。就我而言，我本质上需要在每个动画步骤上调用 text()，因此我必须做一些欺骗才能使其正常工作。

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

一张图片胜过一千个单词，所以这是 jsFiddle: http://jsfiddle.net/XjrNC/

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

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

谢谢。

Answer 1

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

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

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

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

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

这是我的修改。

http://jsfiddle.net/pmZHp/3/