javascript - 时间或鼠标离开后的jQuery .slideUp()

我得到了一个使用.slideDown()方法由JQuery向下滑动的元素

$('#dropdown_shopping_cart').slideDown(800);

现在我希望它在6秒后向上滑动，但前提是元素上没有悬停，如果有悬停，则不应该.slideUp()。

到目前为止，我使用了一个超时操作，即在CSS中为元素提供悬停display:none时向该元素添加了display:block!important;，以便在悬停结束之前不会获得display: none。

JS
setTimeout(function () {
        $('#dropdown_shopping_cart').css('display', 'none');
    }, 6000);

_______________________________________________________
CSS
    #dropdown_shopping_cart:hover {
        display: block!important;
    }

现在我要添加.slideUp()到此。

最佳答案

您可以清除mouseenter上的超时，并在mouseleave上重置它，如下所示:

var hide_div_to;

function hideDiv(){
    hide_div_to = setTimeout(function () {
        $('#dropdown_shopping_cart').slideUp(800);
    }, 6000);
}

$('#dropdown_shopping_cart').slideDown(800,hideDiv());

$('#dropdown_shopping_cart').mouseenter(function(){
     clearTimeout(hide_div_to);
});

$('#dropdown_shopping_cart').mouseleave(function(){
     hideDiv();
});

这是一个工作的JSFiddle

更新

如果您不想在离开时再次等待超时，则可以在达到超时后执行以下操作:

$('#dropdown_shopping_cart').slideDown(800);

setTimeout(function () {
    if(!$('#dropdown_shopping_cart').is(':hover')){
        $('#dropdown_shopping_cart').slideUp(800);
    }
    else{
        $('#dropdown_shopping_cart').mouseleave(function(){
            $('#dropdown_shopping_cart').slideUp(800);
        });
    }
}, 3000);

这是JSFiddle，而here是另一个显示如何多次触发的ojit_a。

关于javascript - 时间或鼠标离开后的jQuery .slideUp()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32783799/