Animar el color de fondo de una celda de una tabla HTML (o toda la fila) en un evento

Tengo una mesa con un menú (alimentos) con varias filas y columnas. La segunda columna contiene un enlace al artículo alimenticio. Cuando el usuario hace clic en él, el artículo se agrega a un carrito de compras.

Me gustaría dar al usuario algunos comentarios visuales sobre el hecho de que el clic y la sum realmente funcionaron. Ya tengo un controlador de clic para el enlace que agrega el elemento al que se hizo clic en el carrito. Una alert('Item successfully added'); simple alert('Item successfully added'); funciona pero no es realmente bonito

Me gustaría que la celda de la tabla (o toda la fila) “parpadee” una vez. Al decir “parpadear” me refiero a “cambiar el color de fondo suavemente de la stream (gris claro) a, por ejemplo, amarillo y luego volver a la normalidad”. Esto debería suceder solo una vez.

Estoy usando jQuery 2.x y Bootstrap 3.x.

Mi código (simplificado) se ve así:

  $('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'); }); 
  
1 Hamburger 2.65
2 Cheeseburger 3.25

¿Cómo hago que la fila destelle en lugar de simplemente cambiar el color de fondo?

A menudo es mejor usar clases de CSS en lugar de manipular estilos directamente:

 $('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; } 
  
1 Hamburger 2.65
2 Cheeseburger 3.25