title: fadeTo and slideToggle behving oddly
body: <p>Or rather, with my limited knowledge I can't figure out what I've done wrong in order that it's behaving this way.</p>
  
  <p>I have a div that contains a contact form. The div is hidden, but when a user hovers over 'contact' in the nav bar, the div slides down to reveal the form. The client would like to have the word 'contact' display for .5 seconds in that space - then fade out - then have the form fade in.</p>
  
  <p>My problem is that when the user moves their cursor to hover over the form (as inevitably they will), it fades out and then fades in again quickly - this behavior seems to disrupt the flow of sequential animations and cause other odd behavior, as well.</p>
  
  <p>Wondering if someone may be so kind as to point out my error.</p>
  
  <p>I'll add my js below, and I've set up a fiddle here: <a href="http://jsfiddle.net/zMdw6/" rel="nofollow">http://jsfiddle.net/zMdw6/</a></p>
  
  <pre><code>$(function () {
      $(document).on("mouseenter", "#the-menu-item, .the-hidden-div", function () {
          $(".the-hidden-div").stop().slideDown(500, function() {
              $(".the-word").stop().fadeTo(200, 0, function() {
                  $(".the-form").fadeTo(200, 1)
              });
          });
      });
  
      $(document).on("mouseleave", "#the-menu-item, .the-hidden-div", function () {
          $(".the-form").stop().fadeTo(500, 0, function() {
              $(".the-hidden-div").stop().slideToggle(500, function() {
                  $(".the-word").fadeTo(1000, 1)
              });
          });
      });
  });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.the-hidden-div {display: none;}
  .the-word {opacity: 1;}
  .the-form {opacity: 0;}
  </code></pre>
  
  <p><strong>As always, any help is greatly appreciated. Thanks!</strong></p>