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.sideba开发者_StackOverflow中文版r_content_con it should stop the animation right there.

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

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

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

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