title: JQuery animation and mouse hover
body: <p>I am trying to make a search bar appear next to an image when you hover over it, and disappear when you hover over the image next to it. I have basically gotten it working, but it is acting really glitchy. It's hard to explain in writing how it is behaving, but you can see what I'm talking about here: <a href="http://thecampusbubble.com/redesign/sandbox/problem.php" rel="nofollow">http://thecampusbubble.com/redesign/sandbox/problem.php</a>. I think a big part of the problem occurs when you hover over one image, then quickly go to the next one before the search bar has completely appeared.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class='header'&gt;
  &lt;div class='pageContainer'&gt;
      &lt;img class='bubbleLogo' src='    ../lib/images/bubbleLogo.png    ' /&gt;
      &lt;div class='iconContainer' id='findContainer'&gt;
          &lt;div class='headerIcon findIcon' id='find'&gt;&lt;/div&gt;
          &lt;div class='searchBar' id='findSearchBar'&gt;
              &lt;div class='innerBox'&gt;Night Life&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='iconContainer' id='buzzContainer'&gt;
          &lt;div class='headerIcon buzzIcon' id='buzz'&gt;&lt;/div&gt;
          &lt;div class='searchBar' id='buzzSearchBar'&gt;
              &lt;div class='innerBox'&gt;Night Life&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='iconContainer' id='feedContainer'&gt;
          &lt;div class='headerIcon feedIcon' id='feed'&gt;&lt;/div&gt;
          &lt;div class='searchBar' id='feedSearchBar'&gt;
              &lt;div class='innerBox'&gt;Night Life&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Script:</p>
  
  <pre><code>$('#find').hover(function(){
      $('#findSearchBar').animate({opacity: 100, width: 290}, 500);
      $('#findContainer').animate({width: 365}, 500);
  
      $('#buzzSearchBar').animate({opacity: 0, width: 0}, 500);
      $('#buzzContainer').animate({width: 79}, 500);
  
      $('#feedSearchBar').animate({opacity: 0, width: 0}, 500);
      $('#feedContainer').animate({width: 79}, 500);
  });
  $('#buzz').hover(function(){
      $('#findSearchBar').animate({opacity: 0, width: 0}, 500);
      $('#findContainer').animate({width: 79}, 500);
  
      $('#buzzSearchBar').animate({opacity: 100, width: 290}, 500);
      $('#buzzContainer').animate({width: 365}, 500);
  
      $('#feedSearchBar').animate({opacity: 0, width: 0}, 500);
      $('#feedContainer').animate({width: 79}, 500);
  });
  $('#feed').hover(function(){
      $('#findSearchBar').animate({opacity: 0, width: 0}, 500);
      $('#findContainer').animate({width: 79}, 500);
  
      $('#buzzSearchBar').animate({opacity: 0, width: 0}, 500);
      $('#buzzContainer').animate({width: 79}, 500);
  
      $('#feedSearchBar').animate({opacity: 100, width: 290}, 500);
      $('#feedContainer').animate({width: 365}, 500);
  });
  $(document).ready(function(){
      $('#buzzSearchBar').animate({ opacity: 0, width: 0 }, 0);
      $('#feedSearchBar').animate({ opacity: 0, width: 0 }, 0);
      $('#buzzContainer').animate({ width: 79 }, 0);
      $('#feedContainer').animate({ width: 79 }, 0);
  });
  </code></pre>