CODEWITHSUNDEEP
javascriptjqueryoptimization
Vainglory07
Vainglory07

Reputation: 5283

Replace setInterval with jQuery Animation

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.

Upvotes: 0

Views: 156

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

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

  1. Since you are not actually animating any element you will have to pass jQuery an object with a counter
  2. As the property to animate just pass the same type of object with the ending property value
  3. Then pass a second paramater setting the different options, at least step and complete in this case
  4. 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

Upvotes: 1

Related Questions