0

スクリプトを見つけたので、少し変更したいと思います。ユーザーが特定のdiv#galleryで非アクティブまたはアクティブなときに、div#menuwrapをアニメーション化しようとしています。

今では、最初にアニメーション化した後でも、＃galleryの外でもアニメーション化しています。

どんな助けでも大歓迎です！

デモ： http： //jsfiddle.net/m2FvY/1/

   $('#gallery').mouseover(function() {
        var interval = 1;
       setInterval(function(){            
           if(interval == 5){
               $('#menuwrap').animate({top: '-50px'}, 100); 
               interval = 1;
           }
           interval = interval+1;
            console.log(interval);
        },200); 

        $('#gallery').bind('mousemove keypress', function() {
            $('#menuwrap').animate({top: '0'}, 100); 
            interval = 1;
        }); 
});
4

1 に答える 1

1

JSFIDDLEデモ

遅延タイマーは、ユーザーが#galleryでmousemoveまたはkeypressイベントをトリガーするたびにリセットされます。そこにホバーイベントを追加して、＃galleryにカーソルを合わせたときにメニューが非表示にならないようにすることもできます。

    var interval = 1;

    function delayCheck()
    {
       if(interval == 5)
       {
           $('#menuwrap').animate({top: '-50px'}, 100);
           interval = 1;
       }
       interval = interval+1; console.log(interval);
    }

    $('#gallery').bind('mousemove keypress', function() {
        $('#menuwrap').animate({top: '0'}, 100);
        interval = 1;

        // reset the delay timer
        clearInterval(_delay); console.log('reset timer');
        _delay = setInterval(delayCheck, 500);
    });


    // starts delay timer when page loads
    _delay = setInterval(delayCheck, 500);

回答パート2

JSFIDDLEデモ＃2

#galleryイベントのmousemoveまたはkeypressがトリガーされた場合にのみ、非アクティブをチェックします。ユーザーが#galleryボックスから移動すると、delayCheck（）が強制終了され、＃menuwrapが先頭に戻ります：-50px。

    var interval = 1;
    _delay = 0;

    function delayCheck()
    {
       if(interval == 5)
       {
           $('#menuwrap').animate({top: '-50px'}, 100);
           interval = 1;
           clearInterval(_delay);
       }
       interval = interval+1;
       console.log(interval);
    }

    // turn delayCheck() ON, when mousing to #gallery
    $('#gallery').bind('mousemove keypress', function()
    {
        console.log("mousemove keypress");

        $('#menuwrap').animate({top: '0'}, 100);
        interval = 1;

        // reset delayCheck
        clearInterval(_delay);
        _delay = setInterval(delayCheck, 500);
    });

    // turn delayCheck() OFF, when mousing out of #gallery
    $('#gallery').mouseout(function(){
        console.log("mouseout");
        $('#menuwrap').animate({top: '-50px'}, 100);
        interval = 1;

        clearInterval(_delay);
    });
于 2012-04-04T20:26:48.763 に答える