jQuery: Beim Klicken, verhindern mouseenter Ereignis

Question

Ich habe zwei separate Animationen, die auf mouseenter die andere auf click vorkommt. Das Problem ist, dass wenn sie beide aktiviert sind, es eine jumpy Animation erzeugt.

können Sie sehen, was ich meine hier: JSFiddle

Ist es möglich, die mouseenter Ereignis zu verhindern, auftreten, wenn das click Ereignis aktiviert ist?

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

scheint einfacher, nur dies zu tun:

$('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

Nein, können Sie nicht. Vor allem, weil diese Ereignisse aufeinander aufbauen: Um auf ein Element zu klicken, müssen Sie es mit der Maus eingeben: Sie können das Ereignis enter nicht deaktivieren, das bereits beim Klicken aufgetreten ist. Und Sie sollten natürlich zukünftige click Ereignisse bei der Eingabe nicht deaktivieren.

Die Lösung für Ihr Problem mit den springenden Animationen sollte die stop() method sein, die laufende Animationen auf den ausgewählten Elementen beendet.

Answer 3

Wie wäre es mit der Prüfung nach der Klasse open nach der Verzögerung.

von

Ändern

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

zu

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

Offensichtlich können Sie die Verzögerung nach Ihren Wünschen Feinabstimmung, aber die Idee wäre so etwas wie:

Wenn sie dies nicht tun Klicken Sie vor x Millisekunden, erhöhen Sie die Auffüllung.

Answer 4

Sounds wie Sie brauchen .stop().

Fügen Sie diese zu Beginn Ihrer click Veranstaltung:

$('header').stop(true) 

Der erste Parameter für wahr ist clearQueue, die Ihre Animation Warteschlange löschen wird.

Siehe hierzu jsFiddle.