How to prevent jQuery hover event from firing when not complete?

问题

Here is where I am having difficulty:

$('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').slideDown(500, function() {
        $(this).children('.sidebar_details, .sidebar_click').fadeIn(500);   
    });

},function(){
    $(this).children('.sidebar_details_container').slideUp(500)
    $('.sidebar_details, .sidebar_click').fadeOut(500);                                                 
});

The problem is that multiple hover events can fire while the slideDown and fadeIn animations are occurring. Ideally, only one hover event should be firing and if the user is no longer hovering over the div.sidebar_content_con it should stop the animation right there.

回答1:

Add in some stop()s

$('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').stop(true, true).slideDown(500, function() {
        $(this).children('.sidebar_details, .sidebar_click').stop(true, true).fadeIn(500);   
    });

},function(){
    $(this).children('.sidebar_details_container').stop(true, true).slideUp(500)
    $('.sidebar_details, .sidebar_click').stop(true, true).fadeOut(500);                                                 
});

回答2:

You could use stopImmediatePropagation() on the event to avoid it bubbling aup and firing other events

$('div.sidebar_content_con').hover(function (event) {
    event.stopImmediatePropagation();
    $('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').stop(true, true).slideDown(500, function()

回答3:

Try adding .stop() to the chain of functions (http://api.jquery.com/stop/):

$('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').stop().slideDown(500, function() {
        $(this).children('.sidebar_details, .sidebar_click').stop().fadeIn(500);   
    });

},function(){
    $(this).children('.sidebar_details_container').stop().slideUp(500)
    $('.sidebar_details, .sidebar_click').stop().fadeOut(500);                                                 
});

回答4:

You need to stop the propagation of the event with the stop() method.

$('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').stop('true, true).slideDown(500, function() {
        $(this).children('.sidebar_details, .sidebar_click').stop('true, true).fadeIn(500);   
    });

},function(){
    $(this).children('.sidebar_details_container').stop('true, true).slideUp(500)
    $('.sidebar_details, .sidebar_click').stop('true, true).fadeOut(500);                                                 
});

来源：https://stackoverflow.com/questions/6512644/how-to-prevent-jquery-hover-event-from-firing-when-not-complete

标签

jquery

jquery-selectors

jquery-events