將鼠標不活動時的div設置爲一格div

Question

我找到了一個腳本並希望對其進行修改。我試圖動畫一個div #menuwrap當用戶處於非活動狀態或在某個div #gallery上激活時。

現在，它仍然在第一次生成動畫後即使在#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; 
     }); 
}); 

Answer 1

JSFIDDLE DEMO

延時定時器復位隨時隨地用戶觸發上#gallery鼠標移動或按鍵事件。您也可以在該處添加懸停事件，以確保在#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); 

---

答案PART 2周

JSFIDDLE DEMO #2

只有不活動檢查一次#gallery事件鼠標移動或按鍵已被觸發。一旦用戶移出#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); 
    });