Question

当鼠标移动时，我有一个我想要淡入的div。如果鼠标闲置约3秒钟，那么我希望div淡出。

它有效，但这是一个小问题。如果你在div出现后再次移动鼠标几次，然后让鼠标闲置3秒，div有时会在淡出后再次淡入。我不知道为什么会发生这种情况以及为什么它有时会发生。

我使用的脚本来自此帖子中的另一个帖子：Jquery: how to make something fade out...

我试图在time - { - 1}}结束时重置setTimeout而没有运气。

这是我的代码：

HTML：

<div class="object">
</div>

CSS：

.object {
    display: none;
    width: 100px;
    height: 100px;
    background: red;
}

的JavaScript / jQuery的：

var timer;
$(document).mousemove(function() {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }

    $('.object').fadeIn(300);

    timer = setTimeout(function() {
        $('.object').fadeOut(300);
        time = 0;
    }, 3000);

});

Fiddle

任何请的人都可以帮助我吗？：）

Answer 1

如果你只想在你需要一个变量来跟踪它是否是第一次时发生淡入淡出。我在代码中添加了一个布尔值：

var timer;
var first = true;
$(document).mousemove(function() {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }
    if (first) {
        $('.object').fadeIn(300);

            timer = setTimeout(function() {
                $('.object').fadeOut(300);
                timer = 0;
                first = false;
            }, 3000);
    }         
});

jsfiddle

Answer 2

我认为你需要关注：Hover Intent。

它处理悬停在元素上然后移出，然后返回等问题。我已经在这样的事情上取得了很大的成功。它还允许您在遍历子元素时保持触发悬停，以便嵌套变得更容易。

在鼠标移动淡出后，Div重新出现

这是我的代码：

2 个答案: