我有一张桌子，上面有一个菜单（食品），有几行和几列。
第二列包含食品的链接。当用户点击它时，
该商品已添加到购物车中。
我想给用户一些点击和添加的视觉反馈
确实有效。我已经有一个用于添加链接的点击处理程序
商品点击进入购物车。一个简单的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>
如何使行闪烁而不是简单地更改其背景颜色？
通常最好使用 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>
小提琴演示 https://jsfiddle.net/isherwood/8zqznzsg
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
