jQuery: Al hacer clic, evitar el evento de mouseenter

Question

Tengo dos animaciones separadas que se están produciendo, una se activa en mouseenter y la otra en click. El problema es que cuando ambos se activan, crea una animación de saltos.

Se puede ver lo que quiero decir aquí: JSFiddle

¿Es posible evitar que el evento ocurra mouseenter si se activa el evento click?

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

parece más fácil simplemente hacer esto:

$('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, no se puede. Especialmente porque esos eventos se basan entre sí: para hacer clic en un elemento, debe ingresarlo con el mouse: No puede desactivar el evento enter que ya sucedió al hacer clic. Y, obviamente, no debería desactivar futuros eventos click al ingresar.

La solución a su problema con las animaciones de salto debe ser stop() method, que termina ejecutando animaciones en los elementos seleccionados.

Answer 3

¿Qué hay de la comprobación de la clase open después del retraso.

El cambio de

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

a

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

Obviamente se puede ajustar con precisión el retraso de su agrado, pero la idea sería algo así como:

Si no lo hacen haga clic antes de x milisegundos, aumente el relleno.

Answer 4

Parece que necesita .stop().

Esto, unido al inicio de su evento click:

$('header').stop(true) 

El primer parámetro para la verdadera es clearQueue, que despejará la cola de animación.

Ver esto jsFiddle.