jquery鼠标移动无法正常工作

Question

我必须做一些东西，比如当用户移动鼠标时，会出现一些东西，两秒钟后它就会隐藏（比如flickr幻灯片）。我将 jquery .mousemove 事件与 slideDown and slideUp 一起使用。在调用slides functions时，我还传递了一个回调函数，该函数在 2 秒后将其隐藏。

问题：第一次鼠标移动时，它会显示，然后在 2 秒后隐藏。但是在那之后，在鼠标移动时，它每 1000 次只出现一次。为什么？

jquery代码：

var prevDate = 0; // keep this as a global variable 
$('#slides').mousemove(function(e) {
    var date = new Date().getTime();
    if(date - prevDate > 300){
        $('#up').slideDown('normal',function (){
            $('#up').delay(2000).slideUp('normal');
        });
        $('#down').slideDown('normal',function (){
            $('#down').delay(2000).slideUp('normal');
        });
            prevDate = date;
    }
});

其中幻灯片是宽度和高度为 100% 的div，#up and #down是我想显示和隐藏的两个div。

您可以在此处查看整个代码。

Answer 1

看到您提供的 fickr 链接后，我终于明白了您要做什么

---

您希望在mouse moves时同时显示顶部和底部面板，并在鼠标移动时继续显示面板。然后你想在鼠标停止移动后正好隐藏它们 2 秒。

现在这是解决方案：

$("document").ready(function(e) {
    var onmousestop = function() {
        $('#up').slideUp('normal');
        $('#down').slideUp('normal');
    };    
    var timer;    
    $('#slides').mousemove(function(e) {
        $('#up').slideDown('normal');
        $('#down').slideDown('normal');
        clearTimeout(timer);
        timer = setTimeout(onmousestop, 2000);
    });
});​

还可以在 http://jsfiddle.net/3rZMM/9/中找到解决方案

Answer 2

你能捕获悬停事件而不是鼠标移动吗？

//divs show up on mouse move
$('#slides').hover(function(e) {
    $('#up').slideDown('fast',function (){
        $('#up').delay(1000).slideUp('fast');
    });
    $('#down').slideDown('fast',function (){
        $('#down').delay(1000).slideUp('fast');
    });
    }, function(e){});
});​

Answer 3

> 尝试改用.mouseover()。看看更新的小提琴 - http://jsfiddle.net/3rZMM/6/