Question

我正在尝试仅在鼠标移动或窗口滚动时才显示导航栏。它应该出现3秒然后消失。这是有效的，但是对于我的鼠标或窗口移动的每个像素，它添加了淡入然后再次出现到队列的功能，并且随着jQuery动画延迟，它一遍又一遍地执行此操作基本上使导航闪烁为3永远的秒。有没有办法使用.clearQueue()方法来防止这种情况发生，或者还有另一种更有效的方法吗？

HTML：

<div id="gallery"></div>

<div id="control">

    <div id="previous-button" class="button"></div>
    <div id="next-button" class="button"></div>

</div>

jQuery的：

    t = 300;

    function cBar() {
        $("#control").fadeIn(t);
        $("#control").delay(t*10).fadeOut(t);
    }

    $(window).scroll(function() {
        console.log("scroll");
        cBar();
    });
    $(window).mousemove(function() {
        console.log("mouse");
        cBar();
    });

Answer 1

将setTimeout()函数与存储计时器的变量一起使用：

t = 300;
var timer;

function cBar() {
    if( timer ){
        clearTimeout(timer);
    }
    $("#control").fadeIn(t);

    timer = setTimeout(function(){
        $("#control").fadeOut(t);
        timer = null;
    }, t*10);
}

$(window).scroll(function() {
    console.log("scroll");
    cBar();
});
$(window).mousemove(function() {
    console.log("mouse");
    cBar();
});

如何防止队列构建jQuery

1 个答案: