Скрыть div на мыши бездействия, установленного в один div

Question

Я нашел скрипт и хочу немного поменять его. Im пытается анимировать 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

сброс таймера задержки каждый раз, когда пользователь запускает MouseMove или нажатия клавиши на #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); 

---

ОТВЕТ ЧАСТЬ 2

JSFIDDLE DEMO #2

только проверяет бездеятельности раз #gallery события MouseMove или нажатие клавиши были спровоцированы. Как только пользователь переместится из поля #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); 
    });