Question

I’ve been working on a jQuery plugin to animate an element’s text between two number values. jQuery’s animate function forces you to specify an attribute that you’re animating. In my case, I essentially need to call text() on each animation step so I had to do some finagling to get it to work.

Since I’m not using animate() in the normal fashion, I’ve exposed myself to conflicting animation since jQuery doesn’t handle it for me. For example, if I start animating my element’s text to “500” over 5 seconds and also immediately start animating the same element’s text to “500000” over 1 second, I get strange results because they’re conflicting with one other.

A picture is worth a thousand word, so here’s the jsFiddle:
http://jsfiddle.net/XjrNC/

My primary question is: What’s the most appropriate way to ensure that when I start a new animation that the previous animations are stopped.

My second question is: What’s your feedback on my code so far? Would you take a different approach?

Thanks.

Answer 1

I would just assign IDs instead of calling by class… this would be using your code, I made a considerable number of edits in my version, so I wouldn’t really even do this.

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

In your code I felt the $.each inside of the tweenText wasn’t very useful, IMO that should be outside of the method. The concept is do this to the specified selectors, instead of making extra selections within the method.

Also, I highly recommend using an object of arguments, rather than passing a pre-defined set, then ones which aren’t needed may be passed as null or just left out.

Further, I added a callback function, so that you can setup things which run when the current tweenText is complete.

Here are my modifications.

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