title: Noobie Jquery Question - I found a bug in my script, not sure how to fix it
body: <p>Thanks for your help on <a href="https://stackoverflow.com/questions/1310095/noobie-jquery-question-why-doesnt-this-simple-script-work">my last noobie jquery question</a> and since you done good, I have another for you :)  The script below allows me to perform some simple AJAX by retrieving some static markup from another HTML file and insert it into my homepage.  I'm experiencing a bug that I think is related to the magic of asynchronicity, but since I'm new to AJAX, I'm not sure.  </p>
  
  <p>When I move my mouse over a link, it retrieves the HTML and inserts it into my homepage.  When I move my mouse off the link, it should remove the new HTML that was inserted.  The bug presents itself when sometimes the HTML is inserted, but not removed when you move the mouse on/off the link very quickly.  My theory is the "mouse off" function is called before the HTML is actually inserted, do you agree?  If so, any thoughts on how to fix this?  Here's the script...</p>
  
  <pre><code>$(function()
  {
      //HOVER EFFECT FOR CONTACT LINK
      $('a#contact_link').hover(function() 
      {        
          $('&lt;div id="contact_container" /&gt;').load('contact.htm #contact', function() 
          {
              $(this).stop()
                  .hide()
                  .insertAfter('#header')
                  .slideDown(250);    
          });      
      }, 
      //MOUSE OFF EFFECT FOR CONTACT LINK
      function()
      {
          $('#contact_container').remove();       
      });    
  });
  </code></pre>
  
  <p>Thanks so much in advance for all your help!</p>
  
  <p><strong>EDIT* Thanks to your replies, I changed my script and the bug seems to be fixed...</strong></p>
  
  <pre><code>$(function()
  {
      //RETRIEVE THE MARKUP AT PAGE LOAD
      $('&lt;div id="contact_container" /&gt;').load('contact.htm #contact', function() 
      {
          $(this).hide()
              .insertAfter('#header');
      });
  
      //HOVER EFFECT FOR CONTACT LINK, SHOW THE MARKUP
      $('a#contact_link').hover(function() 
      {        
          $('#contact_container').stop()
              .slideDown(250);             
      }, 
      //MOUSE OFF EFFECT FOR CONTACT LINK, HIDE THE MARKUP
      function()
      {
          $('#contact_container').stop()
              .hide();        
      });    
  });
  </code></pre>
  
  <p>I can still see potential for a few bugs in this script, but i'll save that for another question ;)  thanks everyone!</p>