Question

I am doing a small slideUp/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.

Answer 1

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');
          });

    });