2016-06-28 107 views
4

這是我的表中的行我的要求是第一次4秒的顏色變得褪色後顯示一行的背景色黃色 我用下面的代碼JavaScript的延遲不工作

$('#lock').prepend('<tr><td>hello</td><td>cool</td><td>dad</td></tr>');

我使用下面的代碼

$("#lock tr").css('background-color','yellow').delay(4000).css('background-color','fade'); 

問題拖延不工作

+0

你添加了'jquery.min.js'嗎? – Poonam

+0

是的poonam我用jquary。 min.js –

+0

嘗試添加此腳本'' –

回答

5

讓CSS渲染的背景色彩過渡(越快,JS):

// JS solution 
setTimeout(function() { 
    var element = document.getElementById('lock'); 
    element.classList.add('red'); 
}, 4000); 

// jQuery solution 
$('#lock').delay(4000).addClass('red'); // no good, check the edit. 

#lock { 
    background-color: yellow; 
    transition: background-color 0.3s; 
}  
#lock.red { 
    background-color: red; 
} 

現在一旦DOM被加載,右關閉<body>標記前添加下面的JavaScript 編輯

如果你想知道爲什麼你的代碼不起作用,請檢查this的答案。 delay函數似乎只適用於隊列中的項目(如動畫)。爲別的,使用普通的老傢伙在我的第一個JS的解決方案給出:

var $table = $("#lock"); 
$table.css("background-color", "yellow"); 

setTimeout(function() { 
    $table.css("background-color", "red"); 
}, 4000); 

如果你也想淡出過渡,你還是不得不使用一些CSS。

祝你好運。