How to stop jquery animate at onclick?
<p>I'm new in jquery, I don't know much about it, but I need it because I'm building a template...Here is situation, I have a div which I want to slide in to page ( from outside, top) when I click on link, and when I click anywhere else on the page to slide out... This is what I have:</p>

<pre><code>var tmpl_name = '&lt;?php echo $this-&gt;template ?&gt;';
jQuery(document).ready(function() {

  jQuery('#link').click(function() {
    var topy = jQuery('#div');
      topy.delay(0).animate({
      top: parseInt(topy.css('top')) == 0 ? -topy.outerWidth() : 10
    },500, 'easeInOutCirc', function() {jQuery(this);});
  });

});
</code></pre>

<p>...and it works well,when I click on link div slide in to page, but I don't know how to achieve when I click anywhere else on page to slide out the div, I have tried to add:</p>

<pre><code>jQuery('body').click(function() {
    var topy = jQuery('#div');
      topy.delay(0).animate({
      top: parseInt(topy.css('top')) == 0 ? -topy.outerWidth() : -500
    },1000, 'easeInOutCirc', function() {jQuery(this);});
  });
</code></pre>

<p>...but problem is when I click on link to slide in div, div goes in and out of page ( probably because link is also in body and this second part of code affects it too.</p>

<p>Thanks for your time...Best regards </p>
