CODEWITHSUNDEEP
javascriptjqueryanimation
Hugo
Hugo

Reputation: 1

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').hide('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.

Upvotes: 0

Views: 184

Answers (3)

SeanCannon
SeanCannon

Reputation: 77966

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

Upvotes: 0

kolufild
kolufild

Reputation: 732

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.

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77966

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/

Upvotes: 1

Related Questions