Question

这是我的code。

使用Javascript：

var table = document.getElementById("Table-1");
var rowCount = table.rows.length;



for(var i=0;i<6;i++) {


row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
cell1.name = "animate";
cell1.id = i ;
var content = document.createElement("output");                
content.innerHTML = i ;
cell1.appendChild(content);
rowCount++;

  // if (i%2 == 0) {
       setInterval(function() {
           $(input[name="animate"]).animate( { backgroundColor: '#f08080' }, 'slow')
           .animate( { backgroundColor: 'red' }, 'slow'); 
                 }, 1000);
   // }

}

HTML：

<table id="Table-1" border="1">

                    <tr>
                        <th><center>List</center></th>
                    </tr>
</table>

我使用javascript构建了我的表格，我希望每秒动画几行，但它并不适用于所有行。但是，当我为某个特定行设置动画时，它会起作用。

谢谢。

Answer 1

您的脚本中存在几个问题：

您创建output元素而不是input
您为td命名，但稍后在选择器

input

您在选择器
您无缘无故地在循环中启动多个动画
你将香草javascript与jquery混合（这只是化妆品）

将选择器更改为：

setInterval(function() {
    $('table td input').animate({
        backgroundColor: '#f08080'
    }, 'slow').animate({
        backgroundColor: 'red'
    }, 'slow');
}, 1000);

查看更新的FIDDLE。

Answer 2

相同的HTML，更好的形式：

<table id="Table-1" border="1">                   
    <tr>
        <th><center>List</center></th>
    </tr>
</table>

使用JavaScript：

var table = document.getElementById("Table-1");

for(var i=0;i<6;i++) {   
    var row = document.createElement('tr');
    var cell = document.createElement('td');
    cell.className = 'animate';
    cell.id = i;
    cell.innerHTML = i;
    row.appendChild(cell);
    table.appendChild(row);     

    setInterval(function() {
       $('td.animate').animate( { backgroundColor: '#f08080' }, 'slow')
       .animate( { backgroundColor: 'red' }, 'slow');
    }, 1000);
}

行动中：http://jsfiddle.net/yR6jc/151/

Answer 3

我认为（我的代码）的最佳解决方案是fiddle

Answer 4

你应该考虑使用CSS3动画，不需要jQuery。

简单地说，定义动画：

@keyframes back-animation
{
from {background: white;}
to {background: red;}
}

并将其应用于元素，在您的情况下只应用于您想要的列中的类

#Table-1{
   width:200px;
   text-align:center;
   background:red;
   animation:back-animation 2s linear 1s infinite alternate;
}

这是带有所需前缀的JS小提琴。

http://jsfiddle.net/yR6jc/156/

ps：这在Internet Explorer上不起作用。

使用jQuery为某些行设置动画

4 个答案: