jQuery MouseMove：内容淡出？

我有全屏幕背景图片，我想通过左侧和右侧的“prev”和“next”箭头来控制。jQuery MouseMove：内容淡出？

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的），以淡入（）和淡出（）这个导航...

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

这一切正常，但是#pagination也fadesOut（）时，我目前在分页链接。是否有可能从这种行为中排除链接本身？我希望我的解释不是太奇怪。再说一遍：现在我的分页就像知名的视频播放器一样工作。当不移动鼠标时，分页消失 - 当移动鼠标时，分页再次消失。

但是，当我目前通过两个链接中的一个（#prev或#next）并且不要移动鼠标时，`#pagination'也会淡出。我不希望这种情况发生。所以当鼠标悬停在两个分页链接上时，分页不应该淡出。

有关于此的任何想法？

来源

2012-08-08 matt

试试这个。

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

来源

2012-08-08 07:21:09

不起作用。你可能会误解我的意思。我希望整个文档能够跟踪鼠标移动 - 所以当在文档上移动鼠标时，“fadeIn（）”函数应该始终触发。然而我只是不希望fadeOut（）在超时之后的'pagination'，当时我正在悬停'next'和'prev'链接本身。 – matt 2012-08-08 07:48:06

jQuery MouseMove：内容淡出？

回答

相关问题