jQuery MouseMove：内容淡出？答案

【问题标题】：jQuery MouseMove: fading of contents?jQuery MouseMove：内容淡出？
【发布时间】：2012-08-08 07:15:17
【问题描述】：

我想通过网站左右两侧的“上一个”和“下一个”箭头来控制全屏背景图像。

html

<nav id="pagination">
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
</nav>

css (scss)

#pagination {   
    display:none;
    position:relative;
    z-index:1;

    a { 
        display:block;
        position:fixed;
        top:45%;
        width:100px;
        height:100px;

        &#next {
            right:20px;
        }

        &#prev {
            left:20px;
        }
    }
}

所以这正是我想要的。我的页面左侧有一个垂直居中的上一个图像链接，页面右侧有一个垂直居中的下一个图像链接。

我有下面的 JS (jquery) 到fadeIn() 和fadeOut() 这个导航…

var c, p = $('#pagination');
$(document).on('mousemove',function() {
        p.fadeIn('fast');
        clearTimeout(c);
        c = setTimeout(function() {
            p.fadeOut('fast');
        }, 1000);
    });

这很好用，但是当我当前通过分页链接时，#pagination 也会淡出（）。是否可以从这种行为中排除链接本身？我希望我的解释不会太奇怪。再说一遍：现在我的分页就像著名的视频播放器一样工作。不移动鼠标时分页淡出 - 移动鼠标时分页再次淡入。

但是当我当前位于两个链接之一（#prev 或#next）并且不移动鼠标时，“#pagination”也会淡出。我不希望这种情况发生。因此，当鼠标悬停在两个分页链接上时，分页不应淡出。

对此有什么想法吗？

【问题讨论】：

标签： javascript jquery pagination timeout mousemove

【解决方案1】：

试试这个。

 var c;
 $('#pagination').('mousemove',function() {
    $(this).fadeIn('fast');
    clearTimeout(c);
    c = setTimeout(function() {
        p.fadeOut('fast');
    }, 1000);
});

【讨论】：

不起作用。你可能误会了我的意思。我希望整个文档都跟踪 mousemove - 所以当在文档上移动鼠标时，“fadeIn()”函数应该总是触发。但是，当我当前悬停在next 和prev 链接本身时，我只是不想在超时后淡出（）pagination。