Replace setInterval with jQuery Animation

Question

I have this kind of gui where I use setInterval to accomplish a simple kind for hover animation:

table { border-collapse: collapse; } table tr td { width: 100px; text-align: center; text-transform: uppercase; border: 1px solid #000; } .red { background: red; } <table id="grid"> <tr id="row_1"><td>row 1</td></tr> <tr id="row_2"><td>row 2</td></tr> <tr id="row_3"><td>row 3</td></tr> <tr id="row_4"><td>row 4</td></tr> <tr id="row_5"><td>row 5</td></tr> <tr id="row_6"><td>row 6</td></tr> <tr id="row_7"><td>row 7</td></tr> <tr id="row_8"><td>row 8</td></tr> <tr id="row_9"><td>row 9</td></tr> </table> <script> var rows = $('#grid tbody').children().map(function(i, e) { return $(this).attr('id'); }).get(); rows.reverse(); var reverse = rows.slice().reverse(); reverse.splice(0, 1); var mirror = rows.concat(reverse); var limit = mirror.length; var ctr = 0; var choose = setInterval(function(){ var chosen = mirror[ctr]; var prevpk = mirror[ctr - 1 < 0 ? limit : ctr - 1]; $('#' + chosen).addClass('red'); $('#' + prevpk).removeClass('red'); ctr++; if (ctr >= limit) { ctr = 0; } }, 100); </script>

What i want to know is how am I going to redo this using jQuery animate or any method that could still do same functionality instead of using the setInterval to loop over the child elements to hover?

Check Output Here.

i update my question.pardon. it should be setInterval. because i found out this setInterval is blocking — Vainglory07
– Vainglory07, Commented Aug 19, 2014 at 6:09
how could you use animate instead of setInterval and that to change the class of an element — Ganesh Gaxy
– Ganesh Gaxy, Commented Aug 19, 2014 at 6:12
animate is to perform a custom animation of a set of CSS properties. You are adding and removing classes. — rnrneverdies
– rnrneverdies, Commented Aug 19, 2014 at 6:12
I think setInterval is best in this case. It's not really an "animation" exactly, at least of the kind that JQuery supports ... — McGarnagle
– McGarnagle, Commented Aug 19, 2014 at 6:18

Patrick Evans · Accepted Answer · 2014-08-19 06:47:55Z

You can do this with .animate, as animate has the ability to create a tween between a starting object property values and ending object property values.

Wither it is better to just use setInterval you will have to check that against how easy it is for you to understand/maintain the code and performance differences you may see with each one

Since you are not actually animating any element you will have to pass jQuery an object with a counter
As the property to animate just pass the same type of object with the ending property value
Then pass a second paramater setting the different options, at least step and complete in this case
On complete make a call to do the same animation in reverse

JS

function doAnimate(dir){ var numele = jQuery("#grid td").length-1; //ternary if just deciding where to start the counter at var counter = {mycounter:dir==1?0:numele}; //again ternary if deciding where to end the counter jQuery(counter).animate({mycounter:dir==1?numele:0}, { duration:1200, //step is called for each step in the tween step:function(stepValue){ var index = Math.round(stepValue); var ele = jQuery("#grid td").eq(index); jQuery("#grid td.red").removeClass("red"); ele.addClass('red'); }, complete: function(){ //does a negation of the dir value (basically a quick toggle) doAnimate(-dir); } }); } doAnimate(1);

JSFiddle demo

Collectives™ on Stack Overflow

Replace setInterval with jQuery Animation

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related