Stopping jquery animation right after user interaction completes

I am doing a small sli开发者_运维百科deUp/slideDown animation(here). Its like, mouseenter --> slideUP & mouseleave --> slideDown. It works as expected. But the problem is, if the user do mouseenter/mouseleave continuously, after he done with it, the animation is still happens.

Its not looks cool. I tried jquery, clearQueue() & stop() functions. But no use.

Any suggestions.

Not sure if this is how you used .stop() but this seems to work for me:

$("div").bind("mouseenter", function() {
        $("a").stop(true,true);
        $("a").animate({
            opacity: 1,
            height: 'toggle'
          }, 'fast', function() {
              $(this).css('display', 'block');
          });

    });
    $("div").bind("mouseleave", function() {
        $("a").stop(true,true);
        $("a").animate({
            opacity: 0,
            height: 'toggle'
          }, 'fast', function() {
              $(this).css('display', 'none');
          });

    });