JQuery: when clicked, prevent mouseenter event

Question

I have two separate animations that occur, one on mouseenter runs the other on click . The problem is that when they are activated, it creates a trembling animation.

You can see what I mean here: JSFiddle

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

Javascript

 $('header h1').mouseenter(function() { $('header:not(.open)').delay(500).animate({ 'padding-bottom': '40px' }, 150, function() { //function complete }); }); $('header h1').mouseleave(function() { $('header:not(.open)').animate({ 'padding-bottom': '20px' }, 150, function() { //function complete }); }); $('header h1').click(function() { if ($('header').hasClass('open')) { $('header p').fadeOut(100); $('header').removeClass('open').animate({ 'padding-bottom': '20px' }, 300, function() { //animation complete }); } else { $('header').addClass('open').animate({ 'padding-bottom': '150px' }, 300, function() { $('header p').fadeIn(); }); } });​ 

Answer 1

It’s harder 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 complete }); } }, mouseleave: function(e) { if (!$(this).is('.open')) { $(this).stop(true, true).animate({'padding-bottom': '20px'}, 150, function() { //function complete }); } }, click: function() { if ($(this).is('.open')) { $(this).find('p').fadeOut(100).end().removeClass('open').stop(true, true).animate({'padding-bottom': '20px'}, 300, function() { //animation complete }); }else{ $(this).addClass('open').stop(true, true).animate({'padding-bottom': '150px'}, 300, function() { $('p', this).fadeIn(); }); } } });​ 

Answer 2

No, you can’t. Moreover, these events are based on each other: To click an element, you need to enter it with the mouse: you cannot deactivate the enter event, which already occurred when pressed. And you obviously should not deactivate future click events upon entry.

The solution to your jump animation problem should be the stop() method, which completes the animation of the selected elements.

Answer 3

How about checking the open class after a delay.

Change

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

to

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

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

If they don’t press until x milliseconds, increase the padding.

Answer 4

Sounds like you need .stop() .

Add this to the start of the click event:

 $('header').stop(true) 

The first parameter to true is clearQueue , which will clear the animation queue.

See jsFiddle .