1

ユーザーがマウスを動かしたときに何かが表示され、2秒後に非表示になるようなものを作成する必要があります( flickr slideshowなど)。でjquery.mousemoveイベントを使用していslideDown and slideUpます。呼び出し中slides functionsに、2 秒後に非表示にするコールバック関数も渡します。

問題: 最初のマウスの移動で表示され、2 秒後に非表示になります。しかし、その後マウスを動かすと、1000回に1回しか表示されません。なぜですか?

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表示および非表示にする 2 つの 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

.mouseover()代わりに使用してみてください。更新されたフィドルを見てください - http://jsfiddle.net/3rZMM/6/

于 2012-05-30T12:39:04.477 に答える
0

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-30T10:42:31.587 に答える