1

我必须做一些事情，比如当用户移动鼠标时会出现一些东西，两秒钟后它会隐藏起来（比如flickr slideshow）。我将 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;
    }
});

slides 是一个宽度和高度为 100%#up and #down的 div，是我想要显示和隐藏的两个 div。

你可以在这里看到整个代码。

4

3 回答 3

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/中找到解决方案

于 2012-05-30T12:40:21.917 回答
0

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

//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){});
});​
于 2012-05-30T10:42:31.587 回答
0

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

于 2012-05-30T12:39:04.477 回答