在 mousemove 上淡出后 Div 重新出现答案

【问题标题】：Div reappears after fadeout on mousemove在 mousemove 上淡出后 Div 重新出现
【发布时间】：2014-06-13 20:07:43
【问题描述】：

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

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

我使用的脚本来自这篇文章的另一个线程：Jquery: how to make something fade out...

我尝试在 setTimeout 函数的末尾重置 time，但没有成功。

这是我的代码：

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

谁能帮帮我？ :)

【问题讨论】：

它在我这边工作得很好
你的fiddle没有发现问题..
它似乎只是有时会这样做。
谁否决了这个问题？结构很好。

标签： javascript jquery css

【解决方案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

【讨论】：

不是我想要的。我希望每次移动鼠标时都会出现 div。但是，如果在 div 出现后移动鼠标几次，则 div 会在它消失后再次出现。

【解决方案2】：

我认为您需要查看：Hover Intent。

它处理悬停在元素上，然后移出，然后返回等问题。我在类似的事情上使用它取得了很大的成功。它还允许您在越过子元素时保持悬停触发，从而使嵌套变得更容易。

【讨论】：