Jquery stop slideUp if user hovers over div

I am trying to stop a slideUp effect if the user is still hovering over the slideDown div. The slideDown div is "utility-nav1"

Any help or tips appreciated on my current code below:

var $j = jQuery.noConflict(); 
$j(document).ready(function() {         
//show cart slide on hover
$j("#u1_cart").mouseenter(function() {
$j(this).addClass("open");
$j("#utility-nav1").slideDown();
$j("#slide-cart").load("cart_load.php", function() {
$j("#utility-nav1-loading").hide()
});
});                     
//开发者_开发技巧hide cart slide on exit
$j("#u1_cart").mouseleave(function() {
$j("#utility-nav1").slideUp("slow", function() {
$j('#u1_cart').removeClass("open")
});
});
});

Without seeing your HTML & CSS, I can't be 100% sure of the issue, but I think there are two likely places where you're running into trouble:

1. .slideDown, .slideUp, and .slideToggle require a display:none property to be given to the element either at the beginning or end of the animation. Therefore, if you try interrupting the animation, subsequent .slide calls will not work correctly. Here's an example of this issue.
2. You may need to call .stop() on the element prior to calling the next animation. This will stop the previous one.

Based on the two points above, I'd advise you to forgo the display:none property on the element, and rather than calling a .slide method, simply animate the height.

Here's a working example.

And the code:

$(function(){
    var mainDiv = $('.main');
    $('.btn').hover(function(){
        mainDiv.stop().animate({height:'200px'},1000);
    },function(){
        mainDiv.stop().animate({height:'0px'},1000);
    });
});

I would suggest using hoverIntent which does most of the hard work for you.

This uses the approach that Jacob Nielson recommends as it prevents users opening the cart by accident if they are moving their cursor past it.

This is untested but should work

$j(document).ready(function() {

    $j("#utility-nav1").hide(); 

    //show cart slide on hover
    function openCart() {
        $j(this).addClass("open");
        $j("#utility-nav1").slideDown();
        $j("#slide-cart").load("cart_load.php", function() {
            $j("#utility-nav1-loading").hide();
        });
    }       

    //hide cart slide on exit
    function closeCart() {
        $j("#utility-nav1").slideUp("slow", function() {
            $j('#u1_cart').removeClass("open")
        });
    }

    var config = {    
        over: openCart, // function = onMouseOver callback (REQUIRED)    
        timeout: 500, // number = milliseconds delay before onMouseOut    
        out: closeCart // function = onMouseOut callback (REQUIRED)    
    };


    // Call hoverIntent with your selector
    $j("#u1_cart").hoverIntent( config )


});

EDIT: Ok based on your markup, this is the best I can do without changing lots of things.

$(document).ready(function(){

  // On hover of your link
  $("#hover").mouseenter(function(){

      // If not then perform the slideDown() animation
      $("#utility-nav1").stop(true,true).slideDown( function(){

        // When the aimation is complete, add the open class to your link
        $("#hover").addClass("open");

      });

  });



  $("#utility-nav1, #hover").mouseleave( function(){

    $("#utility-nav1").stop(true,true).delay(500).slideUp( function(){

      $("#hover").removeClass("open");

    });

  });

  $("#utility-nav1").mouseenter(function(){

    $("#utility-nav1").stop(true,true).slideDown();

  });



});

// close document.ready

Here is a link to the JS Bin