title: JQuery Animate Delay Problems
body: <p>Below is the HTML &amp; JQuery code I have:</p>
  
  <p>HTML I have:</p>
  
  <pre><code>&lt;div class="announcement"&gt;
      &lt;img id="imgBanner" style="cursor: pointer;" onmouseover="showPopup();" /&gt;
  &lt;/div&gt;
  &lt;div id="divArrow" class="arrow"&gt;
      &lt;img id="imgExpandContract" style="cursor: pointer;" alt="Arrow" border="0"onmouseover="showPopup();" /&gt;
  &lt;/div&gt;
  &lt;div id="window"&gt;
      &lt;!-- some html content acting as a fly-out --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre><code>var imgBanner = "xyx.png";
  var imgArrowExpand = "xyx.png";
  var imgArrowContract = "xyx.png";
  var isDone = false;
  
  function showPopup() {
      try {
          var imgWidth = $("#imgExpandContract").width();
          var posX = document.getElementById("imgExpandContract").offsetLeft + imgWidth;
          if (!$("#window").is(":animated")) {
              $("#window").animate({ left: posX }, 800, 'easeOutSine',
                                  function() {
                                      isDone = true;
                                      $("#imgExpandContract").attr("src", imgArrowContract);
                                      $("#window").bind("mouseenter", function() { $("#window").bind("mouseleave", function() { closePopup(); }); });
                                  }
              );
          }
      }
      catch (error) {
          //disable the banner, arrow images
          document.getElementById("imgBanner").style.visibility = 'hidden';
          document.getElementById("imgExpandContract").style.visibility = 'hidden';
      }
  }
  
  function closePopup() {
      try {
          if (isDone) {
              var posY = $("#window").width();
              $("#window").animate({ left: -posY }, 600, 'linear',
                              function() {
                                  isDone = false;
                                  $("#imgExpandContract").attr("src", imgArrowExpand);
                                  $("#window").unbind("mouseenter");
                                  $("#window").unbind("mouseleave");
                              }
              );
          }
      }
      catch (error) {
          //disable the banner, arrow images
          document.getElementById("imgBanner").style.visibility = 'hidden';
          document.getElementById("imgExpandContract").style.visibility = 'hidden';
      }
  }
  </code></pre>
  
  <p>I am currently having 2 problems:</p>
  
  <ol>
  <li><p>When I mouse off the #window div, there is small delay before which the mouseleave is being called. How can I make this go away? It kinda stays for couple of millinseconds before cauing mouseleave.</p></li>
  <li><p>The mouseleave event sometimes does not fire... Happens occasionally, but it happens. I have to move my mouse on the #window div and move back (have to do it twice essentially)? Can anyone let me know why this happens and how i can handle?</p></li>
  </ol>
  
  <p>Are there better solutions to do this other than using animate() in JQuery? Would be happy to all/any suggestions. I am trying to do a fly-out/slideIn effect with content inside a div.</p>
  
  <p>Thank you very much for your help</p>