如何延迟行动,而不是反应

时间:2014-09-08 02:07:15

标签: jquery

所以我有一个下拉翻转效果,但是如果有人在元素上盘旋超过0.5秒,我只希望它能够正常工作。

$('#cart_nav2').mouseenter(function(){
    $('#cart_status').hide();
    $('#cart_contents').stop(true,true).delay(500).slideDown('#cart_contents');
});
$('#cart_nav2').mouseleave(function(){
    $('#cart_contents').slideUp('#cart_contents');
});

所以目前' cart_contents'鼠标输入后,元素将显示.5秒,但我希望它仅在光标悬停超过0.5秒时显示。我做错了什么?

3 个答案:

答案 0 :(得分:0)

您可以使用基于计时器的解决方案,例如

var navContentSliderTimer;
$('#cart_nav2').mouseenter(function () {
    navContentSliderTimer = setTimeout(function () {
        $('#cart_status').hide();
        $('#cart_contents').stop(true, true).delay(500).slideDown();
    }, 500);
});
$('#cart_nav2').mouseleave(function () {
    clearTimeout(navContentSliderTimer)
    $('#cart_contents').slideUp();
});

答案 1 :(得分:0)

问题是,只要将鼠标悬停在#cart_nav2上,就会调用该函数。你只是推迟动画,但动画总是会出现。如果移动鼠标,则立即调用slideUp动画。因此,如果您快速翻转元素,它将立即滑动(即使它不能)然后.5秒后它将向下滑动。试试这个

$('#cart_nav2').mouseenter(function(){
    $('#cart_status').hide();
    setTimeout(function(){
        if ($('#cart_nav2').is(':hover')) {
            $('#cart_contents').stop(true,true).slideDown('#cart_contents');
        },500) 
});

答案 2 :(得分:0)

以下只是一个想法的例证(未经测试):

isHovering = false; // should have a "global enough" scope.

$('#cart_nav2').mouseenter(function(){
    isHovering = true;
    var date = new Date();
    var startTime = date.getTime()
    do while (isHovering and date.getTime() - startTime < 5000) {
    // can use small delay here
    } 

    if (isHovering) {
         $('#cart_status').hide();  
         $('#cart_contents').('#cart_contents');
    }
});

$('#cart_nav2').mouseleave(function(){
    isHovering = false;
    $('#cart_contents').slideUp('#cart_contents');
});