Не затухатьOut on Hover

Question

Этот скрипт угасает div «# box1», когда нет движения мыши. Я пытаюсь заставить это НЕ исчезать, когда курсор находится над div «# box1» и продолжает исчезать, если нет движения мыши за пределами div. Я пробовал if/else для mouseover(), но я не могу заставить его работать правильно.

Может кто-то пожалуйста мне точку в сторону, как выяснить, мой глупый вопрос http://jsfiddle.net/YjC6y/2877/

Спасибо любезно

$(function() { 
    var timer; 
    var fadeInBuffer = false; 
    $(document).mousemove(function() { 
     if (!fadeInBuffer) { 
      if (timer) { 
       console.log("clearTimer"); 
       clearTimeout(timer); 
       timer = 0; 
      } 

      console.log("fadeIn"); 
      $('#box1').fadeIn(); 
      $('html').css({ 
       cursor: '' 
      }); 
     } else { 
      fadeInBuffer = false; 
     } 


     timer = setTimeout(function() { 
      console.log("fadeout"); 
      $('#box1').fadeOut() 
      $('html').css({ 
       cursor: 'none' 
      }); 
      fadeInBuffer = true; 
     }, 1500) 
    }); 
}); 

Answer 1

Попробуйте это: здесь скрипка ссылка: jsfiddle.net/b04jsmkf

if (!$('#box1').is(':hover')) { 

Полная функция:

 $(function() { 
      var timer; 
      var fadeInBuffer = false; 
      $(document).mousemove(function() { 
       if (!fadeInBuffer) { 
        if (timer) { 
         console.log("clearTimer"); 
         clearTimeout(timer); 
         timer = 0; 
        } 

         console.log("fadeIn"); 
        $('#box1').fadeIn(); 
        $('html').css({ 
         cursor: '' 
        }); 
       } else { 
        fadeInBuffer = false; 
       } 


       timer = setTimeout(function() { 
        console.log("fadeout"); 
        if (!$('#box1').is(':hover')) { 
         $('#box1').fadeOut() 
         $('html').css({ 
          cursor: 'none' 
         }); 
         fadeInBuffer = true; 
        } 
       }, 1500) 
      }); 
     }); 

Answer 2

фиксированный, только что добавленный mousemove check на #box.

$(function() { 

var timer; 
var isOnBox = false; 
var fadeInBuffer = false; 



$("#box1").mouseenter(function(){; 
    isOnBox = true; 
}).mouseleave(function(){ 
    isOnBox = false; 
}); 


$(document).mousemove(function() { 
    if (!fadeInBuffer) { 
     if (timer) { 
      console.log("clearTimer"); 
      clearTimeout(timer); 
      timer = 0; 
     } 
     console.log("fadeIn"); 
     $('#box1').fadeIn(); 
     $('html').css({ 
      cursor: '' 
     }); 
    } else { 
     fadeInBuffer = false; 
    } 

    timer = setTimeout(function() { 
     console.log(isOnBox); 
     if(isOnBox==false){ 
      console.log("fadeout"); 
      $('#box1').fadeOut() 
      $('html').css({ 
       cursor: 'none' 
      }); 
      fadeInBuffer = true; 
     } 
    }, 1500) 

}); 
});