jquery - 使用jquery对表格行进行动画突出显示

Question

如果鼠标悬停在表格行上，我想更改(动画)表格行的颜色。你能帮我做这件事吗？谢谢。

td{width:200px;text-align:center; background-color:gray;}


$('tr').mouseover(function() {
    $(this).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $(this).animate
        ({ backgroundColor: "gray" }, 1000);
});

http://jsfiddle.net/NXejr/10/

Answer 1

$('tr').mouseover(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "#666" }, 1000);
});

http://jsfiddle.net/MtF6E/

表格行不响应背景颜色，因此您可以更改内部 td 的背景。由于某种原因，它根本不喜欢“灰色”。认为这实际上是一个有效的 CSS 颜色名称，但显然不是。我用“#666”代替，效果很好。我还介绍了 stop(true, true)。这将停止元素上任何正在进行的动画，以便当前动画可以继续进行。它会带来更流畅的外观和响应。