jQuery Animation Building Up

I have this animation set up on a site. However, when you mouseover and mouseout really fast the animation keeps playing even after you stopped doing it (like it builds up animation in the que). I dont really want this to happen, but when I put stop().show etc... it actually doesn't do what I want, because it changes the position of the div (since i didn't allow the animation to finish).

LINK: http://www.everybodywalks.com/main.php

$(document).ready(function() {
      $('#commercialSlide').mouseenter(function() {

          if ($('#commercialBox').is(":hidden"))
               {
                $('#commercialBox').show('slide', { direction: "down" }, 150);
                $('#commercialLink').hide();
                $('#residentialLink').hide();
               } 
               return false;
      });

       $('#commercialBox').mouseleave(function() {

          if ($('#commercialBox').not(":hidden"))
               {
                $('#commercialBox').h开发者_C百科ide('slide', { direction: "down" }, 150);
                $('#residentialLink').fadeIn(250);
                $('#commercialLink').fadeIn(250);
               }
               return false;
      });

   });

commercialBox is the RED box that pops over the link. commercialSlide is the link ID. commercialLink is the div containing the link. I might consolidate the last two, but at this point I just want to get this working.

You have to override the animation queue with stop().

Replace

$('#commercialBox').show(..

with

$('#commercialBox').stop().show(

and replace

$('#commercialBox').hide(

with

$('#commercialBox').stop().hide(

More reading: http://api.jquery.com/stop/

You should use:

.stop(true, true)

The first parameter will clear all animations from the animation queue, and the second one will complete the current animation immediately. See .stop() for detailed explanation.

Try setting an 'intent' timer to prevent the menu opening accidentally, which should alleviate most of the problem:

   var commercial_timer;
   $('#commercialSlide').live('mouseenter',function()
    {

        // We create a slight delay so the menu only opens when the user holds the mouse over
        // the button for a brief moment. Simply moving the cursor over and past the button
        // should not open the menu
        commercial_timer = setTimeout(function()
        {
                $('#commercialBox').show('slide', { direction: 'down' }, 150);
                $('#commercialLink').hide();
                $('#residentialLink').hide();
        },200);

    }); // End mouseenter listener


    // Clear the mouseenter timeout and close the menu if it is open, when the user exits the menu
    $('#commercialSlide, #commercialBox').live('mouseleave',function()
    {
        clearTimeout(commercial_timer);
        if($('#commercialBox').is(':visible'))
        {
                $('#commercialBox').hide('slide', { direction: "down" }, 150);
                $('#residentialLink').fadeIn(250);
                $('#commercialLink').fadeIn(250);
        }
    });