在事件中为 HTML 表格单元格（或整行）的背景颜色设置动画

Posted 2023-03-06

【中文标题】在事件中为 HTML 表格单元格（或整行）的背景颜色设置动画

【英文标题】：Animating the background color of an HTML table's cell (or the whole row) on an event

【发布时间】：2016-05-10 12:04:56

【问题描述】：

我有一张带有多行多列的菜单（食品）的表格。 第二列包含指向食品的链接。当用户点击它时， 该商品已添加到购物车。

我想给用户一些视觉反馈，点击和添加 实际工作。我已经有一个用于添加链接的点击处理程序 项目点击到购物车。一个简单的alert('Item successfully added'); 有效，但不是很漂亮。

我希望表格单元格（或整行）“闪烁”一次。通过“闪烁” 我的意思是“将其背景颜色从当前（浅灰色）平滑更改为 例如黄色，然后恢复正常”。这应该只发生一次。

我正在使用 jQuery 2.x 和 Bootstrap 3.x。

到目前为止，我的（简化的）代码如下所示：

  $('a[href="#"]').on('click', function(event) 
    // code to add the item to shopping cart (AJAX), omitted here
    // Upon successful return of the AJAX data:
    $(this).closest('tr').css('background-color', 'yellow');
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td><a href="#">Hamburger</a>
    </td>
    <td>2.65</td>
  </tr>
  <tr>
    <td>2</td>
    <td><a href="#">Cheeseburger</a>
    </td>
    <td>3.25</td>
  </tr>
</table>

如何使行闪烁而不是简单地更改其背景颜色？

【参考方案1】：

通常最好使用 CSS 类而不是直接操作样式：

$('a[href="#"]').on('click', function(event) 
    // code to add the item to shopping cart (AJAX), omitted here
    // Upon successful return of the AJAX data:
    var myRow = $(this).closest('tr');

    myRow.addClass('stylish');

    setTimeout(function() 
        myRow.removeClass('stylish');
    , 1000);
);

tr 
    background-color: white;
    transition: background-color 1s;


.stylish 
    background-color: orange;
    transition: background-color 1s;

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<table>
    <tr>
        <td>1</td>
        <td><a href="#">Hamburger</a>
        </td>
        <td>2.65</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#">Cheeseburger</a>
        </td>
        <td>3.25</td>
    </tr>
</table>

Fiddle demo

【讨论】：

哇！我已经在@keyframes 的东西上苦苦挣扎，但没有做对。不知道delay() 和queue()。很酷。 （我已经有一个custom.css，这里为了简化省略了。）