如果用户将鼠标悬停在 div 上，Jquery 停止 SlideUp

Question

如果用户仍将鼠标悬停在 SlideDown div 上，我试图停止 SlideUp 效果。 SlideDown div 是“utility-nav1”

对我当前代码的任何帮助或提示表示感谢：

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

Answer 1

没有看到您的 HTML 和CSS，我不能 100% 确定这个问题，但我认为有两个地方可能会遇到麻烦：

1. .slideDown、.slideUp、和 .slideToggle 需要在动画开始或结束时为元素赋予 display:none 属性。因此，如果您尝试中断动画，后续的 .slide 调用将无法正常工作。 这是此问题的示例。
2. 在调用下一个动画之前，您可能需要在元素上调用 .stop()。这将停止前一个。

基于以上两点，我建议您放弃元素上的 display:none 属性，而不是调用 .slide 方法，只需对高度进行动画处理。

这是一个工作示例。

和代码：

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

Answer 2

我建议使用 hoverIntent 它可以为您完成大部分艰苦的工作。

这使用了 Jacob Nielson 推荐的方法，因为它可以防止用户在将光标移过购物车时意外打开购物车。

这未经测试但应该可以

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


});

编辑：
好的，根据您的标记，这是我在不改变很多东西的情况下能做的最好的事情。

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

这是 JS Bin 的链接