title: Jquery hover (mouseover) works but hover (mouseRemove) function does not load
body: <p>Hi there this is my first legitimate question for stackoverflow, forgive me if I mess up on some social policies. I'm working on Jquery, and I am using these plugins.</p>
  
  <pre><code>    &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.color-2.1.0.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>To make this section of code work:</p>
  
  <pre><code>$(document).ready(function () {
      var timeout;
      $('.twitter').hover(
  
      function () {
          timeout = setTimeout(
  
          function () {
              $('body').animate({
                  "background-color": "#dd4b39"
              }, 400);
          },
  
          function () {
              $('body').animate({
                  "background-color": "#000000"
              }, 400);
              clearTimeout(timeout);
          });
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/josephmcasey/LBBja/" rel="nofollow">Here's a JSFiddle</a></p>
  
  <p>The code will activate the hover effect and change the div to a soft red, but it won't change the div to a solid black when you move your mouse off the div. Most examples of this online suggest an extremely similar approach, so I'm curious as to where I fouled this up.</p>
  
  <p><strong>EDIT 8/27/13 18:28 EST</strong></p>
  
  <p>I guess the history would be necessary, my original code was a very simple function, but it had the problem of buildings of a queue of animate functions before moving onto the next animate.</p>
  
  <p><a href="http://jsfiddle.net/josephmcasey/PYNF7/" rel="nofollow">Here's an example</a> (move your mouse between the two divs quickly)</p>
  
  <pre><code>$(document).ready(function(){
      $('.twitter').hover(
          function() {$('body').animate({"background-color":"#00aced"}, 400);},
          function() {$('body').animate({"background-color":"#232323"}, 400);}
      );
      $('.facebook').hover(
          function() {$('body').animate({"background-color":"#3b5998"}, 400);},
          function() {$('body').animate({"background-color":"#232323"}, 400);}
      );
  });
  </code></pre>
  
  <p>I thought I had correctly constructed a timeout function that would stop the animation of the previous hover function if you initiated a new hover function, preventing the building up animations.</p>