How to prevent jquery hover event from firing when

Question

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 1 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.

Answer 1

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

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

Answer 3

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

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