动画化事件中 HTML table 的单元格（或整行）的背景颜色

Question

我有一个 table 菜单（食品）有几行和几列。第二列包含食品的 link。当用户点击它时，该商品已添加到购物车。

我想给用户一些点击和添加的视觉反馈确实有效。我已经为 link 添加了一个点击处理程序单击购物车的项目。一个简单的alert('Item successfully added'); 可以，但不是很漂亮。

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

我正在使用 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>

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

Answer 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

动画化事件中 HTML table 的单元格（或整行）的背景颜色

Animating the background color of an HTML table's cell (or the whole row) on an event

html

css

jquery

animation

jquery-animate