jquery mousemove無法正常工作

我必須做出類似於當用戶移動鼠標時出現的東西，並在兩秒後隱藏（如flickr slideshow）。我使用jQuery .mousemove事件slideDown and slideUp。在調用slides functions時，我還傳遞了一個回調函數，它在2秒後隱藏它。jquery mousemove無法正常工作

問題：在第一次鼠標移動時顯示，然後在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％和#up and #down是兩個div其中我要顯示和隱藏。你可以看到整個代碼here。

來源

2012-05-30 Abhishek Gupta

我總算明白你正在嘗試做的看到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-30 12:40:21

k，但是這也不能正常工作，或者說我會說完美的flickr幻燈片我修改了鏈接 –

爲了我可以根據時間（日期）使用條件。我想要實現的是mousemove不是鼠標懸停的flickr –

請理解，我想觸發mousemove上的這些div而不是懸停在flickr上的任何東西（請參閱問題中給出的鏈接）以及混亂或超載編輯問題中的js以使用日期 –

您可以捕獲懸停事件而不是mousemove嗎？

//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-30 10:42:31 rt2800

爲什麼解決？這也是爲什麼？ –

嘗試用.mouseover()代替。看看更新的小提琴 - http://jsfiddle.net/3rZMM/6/

來源

2012-05-30 12:39:04

給出了相同的結果？即使這是不正確的。 –

你是什麼意思「不能正常工作」？ –

是否因爲你的CSS在100％寬度上有＃滑動？ –

jquery mousemove無法正常工作

回答

相關問題