CODEWITHSUNDEEP
jqueryjquery-selectorsjquery-events
TaylorMac
TaylorMac

Reputation: 9002

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.

Upvotes: 2

Views: 4826

Answers (4)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

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()

Upvotes: 0

locrizak
locrizak

Reputation: 12281

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);                                                 
});

Upvotes: 0

Jasper
Jasper

Reputation: 75993

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);                                                 
});

Upvotes: 0

Naftali
Naftali

Reputation: 146302

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);                                                 
});

Upvotes: 3

Related Questions