Question

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

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

我喜欢表格单元格（或整行）到＆＃34; flash＆＃34;一旦。通过＆＃34;闪烁＆＃34; 我的意思是＆＃34;将其背景颜色从当前（浅灰色）平滑地改变为例如黄色，然后恢复正常＆＃34;。这应该只发生一次。

我使用的是jQuery 2.x和Bootstrap 3.x。

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

＆＃13;

  $('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');
  });

＆＃13;

<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>

＆＃13;

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

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表格的单元格（或整行）设置背景颜色的动画

1 个答案: