Question

我使用方法

获得了一个由JQuery滑落的元素

.slideDown()

现在我希望它在6秒后向上滑动，但只有当元素没有悬停时，如果有悬停，它不应该$('#dropdown_shopping_cart').slideDown(800);。

到目前为止，当我在CSS中将元素的悬停.slideUp()添加到元素时，我使用了超时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; }添加到此。

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()，如果鼠标悬停操作发生，setTimeOut将被清除，鼠标离开购物车后，setTimeOut将自动设置

Answer 2

我建议您使用鼠标悬停和课程：

$('#dropdown_shopping_cart').hover(function(){
    if(!$('#dropdown_shopping_cart').hasClass('active'))
    {
        $(this).addClass('active');
    } 
    else 
    {
        $(this).removeClass('active');
    }
}, 
function() {
    var myVar = setTimeout(function() {
        if(!$('#dropdown_shopping_cart').hasClass('active'))
        {
            $('#dropdown_shopping_cart').slideUp()
        }
    }, 6000);
})

然后在你的setTimeout函数中添加：

Answer 3

您可以清除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是另一个显示如何多次触发此事的人。

Answer 4

演示： http://jsfiddle.net/yo5gnvy3/7/

 $('#dropdown_shopping_cart').hide().slideDown(800, function () {
     var events = $._data($(this)[0], "events") || {};
     if (events.mouseover === undefined) {
         $(this).delay(1000).slideUp()
     }
 });

JQuery .slideUp（）在时间或鼠标之后

4 个答案: