title: Is it possible to fade a div in slowly on mouse-over, but then fade it out quickly on mouse-out, using Jquery?
body: <p>I have some j-query script that toggle fades a div upon hovering over a separate div. The div fades in at the same rate as it fades out. What I am wanting to achieve is having the div fade in slowly upon mouse-over, but then fade out very quickly upon mouse-out.</p>
  
  <p>The script I have so far is as shows:</p>
  
  <pre><code>// JS code
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function(){
          $("#nav1").hover(function(){
              $("#splat1").fadeToggle(2000);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>So currently the #splat1 div fades both in and then out again in 2 seconds. What I'd ideally like is for it to fade in over 2 seconds, but then fade out in 0.5 seconds. Any suggestions?</p>