title: jQuery .append once at a time only (currently occurs multiple times)
body: <p>I am having a problem with an append.  I am using "mouseenter" and "mouseleave" instead of onhover so that the append isn't happening a million times, however I am still having an issue with people entering and leaving their mouse multiplte times on the div.</p>
  
  <p>To see the issue, please goto <a href="http://mercury-consulting.theportlandco.com/" rel="nofollow">http://mercury-consulting.theportlandco.com/</a> and put your mouseover "cloud based" in the banner about 20% of the way down the page.   If you then move your mouse away and then back over again several times in succession, the append occurs multiple times creating layers and layers.</p>
  
  <p>This is an example of my code:</p>
  
  <pre><code>$("#cloud1").live("mouseenter", function() {
  $(this).append('&lt;div class="cloud1" style="display:none"&gt;&lt;img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="270"/&gt;&lt;/div&gt;')
  .find('div.cloud1').show("slide", { direction: "down" }, 1100); 
  });
  
  $("#cloud1").live("mouseleave", function() {
  $(".cloud1").hide("slide", { direction: "down" }, 1100, function() {
      $(this).remove();
  });
  });
  </code></pre>