title: jQuery error: Uncaught TypeError: Cannot use 'in' operator to search for 'backgroundColor' in undefined
body: <pre><code>$('.metro_menu_button').data('oldColor', $(this).css('background-color'));
  
  $('.metro_menu_button').hover(function () {
      $(this).stop().animate({
          backgroundColor: '#303030'
      }, 300);
  
  }, function () {
  
      $(this).stop().animate({
          backgroundColor: $(this).data('oldColor')
      }, 300);
  
  });
  </code></pre>
  
  <p>As for title, the jQuery code above (which is performed on DOM ready) is returning this error</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot use 'in' operator to search for
    'backgroundColor' in undefined</p>
  </blockquote>
  
  <p>Why is this? What am I doing wrong?</p>
  
  <hr>
  
  <p>I'm trying to do a button which, on hover, changes color and, when the mouse leaves, get back to its original color. I can't hardcode the values: I need this to be flexible and remember by itself the old background color. The following code works fine but, if I move the mouse in and out too quickly, it will "forget" the original color. </p>
  
  <pre><code>$('.metro_menu_button').hover(function () {
  
      $(this).data('oldColor', $(this).css('background-color'));
  
      $(this).stop().animate({
          backgroundColor: '#303030'
      }, 300);
  
  }, function () {
  
      $(this).stop().animate({
          backgroundColor: $(this).data('oldColor')
      }, 300);
  
  });
  </code></pre>
  
  <p>I need to save <code>oldColor</code> on DOMReady, not everytime the mouse gets in. In other words, I need to use the first code but this is throwing the error. What can I do?</p>