I have two seperate animations that are occurring, one fires on mouseenter the other on click. The problem is that when they are both activated it creates a jumpy animation.

You can see what I mean here: JSFiddle

Is it possible to prevent the mouseenter event from occurring if the click event is activated?

Javascript

$('header h1').mouseenter(function() {
  $('header:not(.open)').delay(500).animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function plete
  });
});

$('header h1').mouseleave(function() {
  $('header:not(.open)').animate({
    'padding-bottom': '20px'
  }, 150, function() {
    //function plete
  });
});

$('header h1').click(function() {

  if ($('header').hasClass('open')) {
    $('header p').fadeOut(100);
    $('header').removeClass('open').animate({
      'padding-bottom': '20px'
    }, 300, function() {
      //animation plete
    });
  }

  else {
    $('header').addClass('open').animate({
      'padding-bottom': '150px'
    }, 300, function() {
      $('header p').fadeIn();
    });
  }

});​

I have two seperate animations that are occurring, one fires on mouseenter the other on click. The problem is that when they are both activated it creates a jumpy animation.

You can see what I mean here: JSFiddle

Is it possible to prevent the mouseenter event from occurring if the click event is activated?

Javascript

$('header h1').mouseenter(function() {
  $('header:not(.open)').delay(500).animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function plete
  });
});

$('header h1').mouseleave(function() {
  $('header:not(.open)').animate({
    'padding-bottom': '20px'
  }, 150, function() {
    //function plete
  });
});

$('header h1').click(function() {

  if ($('header').hasClass('open')) {
    $('header p').fadeOut(100);
    $('header').removeClass('open').animate({
      'padding-bottom': '20px'
    }, 300, function() {
      //animation plete
    });
  }

  else {
    $('header').addClass('open').animate({
      'padding-bottom': '150px'
    }, 300, function() {
      $('header p').fadeIn();
    });
  }

});​

• javascript
• jquery
• mouseevent

• Why do you need to delay for half a second? – mayhewr Commented May 28, 2012 at 18:12
• @mayhewr I added the delay to emphasize the problem. But it still exists regardless. – colindunn Commented May 28, 2012 at 18:12
• Looks like unbind might work? api.jquery./unbind – colindunn Commented May 28, 2012 at 18:18
• Did the answer you chose fix the problem? – Dan Commented Jun 17, 2012 at 22:11

4 Answers 4

Seems easier to just do this :

$('header').on({
    mouseenter: function(e) {
        if (!$(this).is('.open')) {
            $(this).stop(true, true).delay(500).animate({'padding-bottom': '40px' }, 150, function() {
                //function plete
            });
        }
    },
    mouseleave: function(e) {
        if (!$(this).is('.open')) {
            $(this).stop(true, true).animate({'padding-bottom': '20px'}, 150, function() {
            //function plete
            });
        }
    },
    click: function() {
        if ($(this).is('.open')) {
            $(this).find('p').fadeOut(100).end().removeClass('open').stop(true, true).animate({'padding-bottom': '20px'}, 300, function() {
                //animation plete
            });
        }else{
            $(this).addClass('open').stop(true, true).animate({'padding-bottom': '150px'}, 300, function() {
                $('p', this).fadeIn();
            });
        }
    }
});​

No, you can't. Especially because those events are based on each other: To click on an element, you need to enter it with the mouse: You can't deactivate the enter event which already happened when you click. And you obviously shouldn't deactivate future click events when entering.

The solution to your problem with the jumping animations should be the stop() method, which ends running animations on the selected elements.

How about checking for the open class after the delay.

Changing from

$('header h1').mouseenter(function() {
  $('header:not(.open)').delay(500).animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function plete
  });
});

to

$('header h1').mouseenter(function() {
  $.delay(500);
  $('header:not(.open)').animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function plete
  });
});

Obviously you can fine-tune the delay to your liking, but the idea would be something like:

If they don't click before x milliseconds, increase padding.

Sounds like you need .stop().

Add this to the beginning of your click event:

$('header').stop(true)

The first parameter for true is clearQueue, which will clear your animation queue.

See this jsFiddle.