Question

我必须做出像用户移动鼠标时显示的内容，并在两秒后隐藏（如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;
    }
});

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

您可以看到整个代码here。

Answer 1

最后，我看到你在看到你提供的恶搞链接后想要做的事情

您希望在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/

jquery mousemove无法正常工作

3 个答案: