Question

我有这种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>

我想知道的是我将如何使用jQuery animate或任何仍然可以执行相同功能的方法重做此操作，而不是使用setInterval循环子元素来悬停？< / p>

Check Output Here.

Answer 1

您可以使用.animate执行此操作，因为animate可以在起始对象属性值和结束对象属性值之间创建补间。

最好只使用setInterval，你必须检查是否容易理解/维护每个人可能看到的代码和性能差异

由于你实际上没有动画任何元素，你必须通过jQuery传递带有计数器的对象
作为动画的属性，只传递具有结束属性值的相同类型的对象
然后传递第二个参数设置不同的选项，在这种情况下至少step和complete
开启complete拨打电话以反向执行相同的动画

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

用jQuery Animation替换setInterval

1 个答案: