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

Question

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

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

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

到目前为止，当我在 CSS 中为元素悬停 display:block!important; 时，我使用了向元素添加 display:none 的超时，所以在悬停结束之前，它不会显示 display: none。

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

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

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

Answer 1

检查这个:

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


$("#dropdown_shopping_cart").hover(
    function() {
        clearTimeout(myVar);
    },

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

默认购物车会在6秒后slideUp()，如果鼠标悬停 Action 发生，setTimeOut会被清除，鼠标离开购物车后， setTimeOut 会自动设置