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を使用してテーブルを作成し、1秒ごとに数行をアニメーション化したかったのですが、すべての行で機能するわけではありません。ただし、特定の行をアニメーション化すると機能します。

ありがとうございました。

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

（私のコードに対する）最善の解決策はこのフィドルにあると思います

于 2012-10-16T17:45:21.843 に答える
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フィドルは次のとおりです。

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

ps：これはInternetExplorerでは機能しません。

于 2012-10-16T18:23:43.777 に答える