jQuery animation timings for non CSS

Question

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?

zozo · Accepted Answer · 2013-04-23 10:01:08Z

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();

headacheCoder · Accepted Answer · 2013-04-23 10:15:50Z

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!

Collectives™ on Stack Overflow

jQuery animation timings for non CSS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related