使用 jQuery animate() 保留备用表格行背景颜色的问题答案

【问题标题】：Issue in preserving alternate table row background color with jQuery animate()使用 jQuery animate() 保留备用表格行背景颜色的问题
【发布时间】：2020-03-13 00:20:45
【问题描述】：

我有一个带有备用行背景颜色的 HTML 表格。

<table class="tb_record">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr class="odd">
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr class="even">
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr class="odd">
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>

此表的 CSS 及其备用行背景颜色为：

.tb_record {
    width:50%;
    border-collapse:collapse;
    text-align:center;
}

.tb_record th, .tb_record td {
    padding:15px;
    border:1px solid #dddddd;
}

.tb_record tr.odd  {
    background-color:#FAFBFB;
}

.tb_record tr.even  {
    background-color:#FFFFFF;
}

要更改表格行背景颜色，我使用的是 jQuery animate() 方法。

$(document).ready(function(){
    $(document).on("mouseenter", ".tb_record tr", function(){
        $(this).stop(true, true).animate({"background-color": "#F5F5F5"}, "fast")
    });

    $(document).on("mouseleave", ".tb_record tr", function(){
        $(this).stop(true, true).animate({"background-color": "#FFFFFF"}, "fast")
    });
});

但是这个 jQuery 代码正在制造一个烦人的问题。当鼠标移出表格行时，它将每行的背景颜色更改为白色。鼠标离开行时如何保留表格行的原始背景颜色？

我知道借助 CSS 可以轻松实现上述目标，但我想使用 animate()。

【问题讨论】：

标签： jquery

【解决方案1】：

问题是因为您需要一种存储原始颜色的方法，而不是在鼠标移出时将每一行设置回白色。您可以通过在页面加载时在元素上存储 data 属性来做到这一点，或者在鼠标移出时读取当前行的索引是否为奇数/偶数。

然而这可以通过使用 CSS 更简单地完成。

你只需要两条规则。一个设置transition 来实现你想要的动画，另一个设置:focus 上的颜色。

.tb_record tr {
  transition: background-color 0.2s;
}
.tb_record tr:hover {
  background-color: #F5F5F5;
}

这也消除了对 jQuery 库的需求，我假设您正在使用动画背景颜色，因为这不是标准功能。

.tb_record {
  width: 50%;
  border-collapse: collapse;
  text-align: center;
}

.tb_record th,
.tb_record td {
  padding: 15px;
  border: 1px solid #dddddd;
}

.tb_record tr {
  transition: background-color 0.2s;
}
.tb_record tr.odd {
  background-color: #FAFBFB;
}

.tb_record tr.even {
  background-color: #FFFFFF;
}

.tb_record tr:hover {
  background-color: #F5F5F5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb_record">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr class="odd">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr class="even">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr class="odd">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

【讨论】：

但我想使用 jQuery animate() 方法，因为我已经告诉过我可以通过使用 CSS 轻松实现。
那你真的应该用 CSS 来做。 JS 远不是一个理想的解决方案。如果你真的想在 JS 中做到这一点，我假设这是一个学习练习，那么你可以使用我在第一段中概述的方法

【解决方案2】：

下面的 jQuery sn-p 代码将完成任务：

    $(document).on("mouseenter", ".tb_record tr:not(:first-child)", function(){
        $(this).data("bg-color", $(this).css("background-color"));
        $(this).stop(true, true).animate({"background-color": "#F5F5F5"}, "fast")
    });

    $(document).on("mouseleave", ".tb_record tr", function(){
        $(this).stop(true, true).animate({"background-color": $(this).data('bg-color')}, "fast")
    });

在这里，当鼠标悬停在数据属性中的第一行（标题）上时，我存储了每一行的背景颜色。并且当鼠标离开表格行恢复原始表格行颜色时，会进一步使用该值。

【讨论】：