title: Animating the background color of an HTML table's cell (or the whole row) on an event
body: <p>I have a table with a menu (food items) with several rows and columns.
  The 2nd column contains a link to the food item. When the user clicks it,
  the item is added to a shopping cart.</p>
  
  <p>I'd like to give the user some visual feedback that the click and adding
  actually worked. I already have a click handler for the link that adds the
  item clicked on to the cart. A simple <code>alert('Item successfully added');</code>
  works but is not really pretty.</p>
  
  <p>I'd like the table cell (or the whole row) to "flash" once. By "flashing"
  I mean "change its background color smoothly from current (light gray) to
  e.g. yellow and then back to normal". This should happen only once.</p>
  
  <p>I'm using jQuery 2.x and Bootstrap 3.x.</p>
  
  <p>My (simplified) code so far looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $('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');
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="#"&gt;Hamburger&lt;/a&gt;
      &lt;/td&gt;
      &lt;td&gt;2.65&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;&lt;a href="#"&gt;Cheeseburger&lt;/a&gt;
      &lt;/td&gt;
      &lt;td&gt;3.25&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I make the row flash instead of simply changing its background color?</p>