1

这是我的代码。

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>

​</p>

我用javascript构建了我的表，我想每秒为几行设置动画，但它不适用于所有行。但是，当我为特定行设置动画时它可以工作。

谢谢你。

4

4 回答 4

2

您的脚本中有几个问题：

  • 您创建output元素而不是input
  • 您命名td，但稍后您input在选择器中引用
  • 您在选择器中缺少撇号
  • 您无缘无故地在循环中启动多个动画
  • 您将香草 javascript 与 jquery 混合（这只是化妆品）

将选择器更改为：

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

请参阅更新的 FIDDLE。

于 2012-10-16T17:24:23.257 回答
1

相同的 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/

于 2012-10-16T17:29:33.270 回答
0

您应该考虑使用 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 Fiddle。

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

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

于 2012-10-16T18:23:43.777 回答
0

我认为最好的解决方案（我的代码）在这个小提琴中

于 2012-10-16T17:45:21.843 回答