Javascript 用jQuery动画替换setInterval

我有这种gui，在这里我使用setInterval来完成一种简单的悬停动画：

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>

表格{
边界塌陷：塌陷；
}
表tr td{
宽度：100px；
文本对齐：居中；
文本转换：大写；
边框：1px实心#000；
}
瑞德先生{
背景：红色；
}
第1行
第2排
第3排
第4排
第5行
第6行
第7排
第8行
第9行
var rows=$（'#grid tbody'）.children（）.map（函数（即，e）{
返回$（this.attr（'id'）；
}).get（）；
行。反向（）；
var reverse=rows.slice（）.reverse（）；
反向拼接（0,1）；
var mirror=行。concat（反向）；
var限制=镜像长度；
var-ctr=0；
var choose=setInterval（函数（）{
选择的var=镜像[ctr]；
var prevpk=镜像[ctr-1<0？极限：ctr-1]；
$（'#'+选中）。addClass（'red'）；
$（'#'+prevpk）.removeClass（'red'）；
ctr++；
如果（ctr>=限制）{
ctr=0；
}
}, 100);

我想知道的是，我将如何使用

jqueryanimate

或任何仍然可以执行相同功能的方法，而不是使用

setInterval

在要悬停的子元素上循环来重做此操作

---

您可以使用.animate来执行此操作，因为animate能够在起始对象属性值和结束对象属性值之间创建一个过渡点

Wither最好只使用setInterval，您必须检查了解/维护代码和性能差异的容易程度

由于您没有实际设置任何元素的动画，因此必须向jQuery传递一个带有计数器的对象

作为要设置动画的属性，只需传递具有结束属性值的相同类型的对象

然后通过第二个参数设置不同的选项，在这种情况下，至少是

步骤

和

完成

在

complete

上，调用以反向执行相同的动画

JS

---

你是说设置间隔吗？我更新了我的问题。对不起。应该设置间隔。因为我发现这个setInterval是阻塞的，你怎么能用

animate

来代替

setInterval

，而改变元素的类animate就是执行一组CSS属性的自定义动画。您正在添加和删除类。我认为在这种情况下，setInterval是最好的。它并不是真正的“动画”，至少是JQuery支持的那种。。。

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