CODEWITHSUNDEEP
jquerysetintervalintervalstimingeasing
headacheCoder
headacheCoder

Reputation: 4613

jQuery animation timings for non CSS

I'd like to count from 0 to n in x seconds and call a function on each step.

For instance:

var count = 0,
    targetCount = 100,
    duration = 500,
    timing,
    interval;

timing = duration / targetCount,

interval = setInterval(function() {
    count ++,

    console.log("call onIntervalProgress()", count);

    if(count === targetCount)
        clearInterval(interval),
        console.log("call onIntervalDone()", count)
}, timing);

The problem is that I don't want to do it that linear. I'd like to use easing for that job. I know that jQuery provides timing functions. Is it possible to use jQuerys "swing" on non CSS stuff?

Upvotes: 0

Views: 180

Answers (2)

headacheCoder
headacheCoder

Reputation: 4613

Here is a jQuery plugin that does exactly what I was searching for:

http://www.bennadel.com/blog/2007-Using-jQuery-s-animate-Method-To-Power-Easing-Based-Iteration.htm

Any better ideas (without internal element creation, etc.) are welcome!

Upvotes: 0

zozo
zozo

Reputation: 8602

Although this is not the exact answer for your question it might help. You don't really need jQuery functions to do that. You can easy use setTimeout and your own timing function. Something like:

  var counter = 0;

  function countSomething() {

       counter++;
       // Call functions, do stuff... whatever you want

       if (counter < n) {
           setTimeout("countSomething()", 2000/counter); // Instead of 2000/counter do something that is appropriate for what you need
       }
  }

  countSomething();

Upvotes: 1

Related Questions