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＆amp; CSS，我不能100％肯定这个问题，但我认为有两个可能会遇到麻烦的地方：

.slideDown，.slideUp和.slideToggle要求在动画的开头或结尾处为元素指定display:none属性。因此，如果您尝试中断动画，后续的.slide调用将无法正常工作。 Here's an example of this issue。
在调用下一个动画之前，您可能需要在元素上调用.stop()。这将停止前一个。

基于上述两点，我建议你放弃元素上的display:none属性，而不是调用.slide方法，只需为高度设置动画。

Here's a working example

代码：

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

Here is a link to the JS Bin

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

2 个答案:

我建议使用hoverIntent为你完成大部分艰苦工作。