Dodaj opóźnienie mouseLeave w jQuery

Question

Używam tego kodu w moim miejscu, a ja zastanawiałem się, w jaki sposób mogę dodać opóźnienie do funkcji mouseLeave

$target.mouseenter(function(e){ 
       var $tooltip=$("#"+this._tipid) 
       ddimgtooltip.showbox($, $tooltip, e) 
      }) 
      $target.mouseleave(function(e){ 
      var $tooltip=$("#"+this._tipid); 
      setTimeout(function() { ddimgtooltip.hidebox($, $tooltip); }, 4000); 
      }) 

      $target.mousemove(function(e){ 
       var $tooltip=$("#"+this._tipid) 
       ddimgtooltip.positiontooltip($, $tooltip, e) 
      }) 
      if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added) 
       $tooltip.mouseenter(function(){ 
        ddimgtooltip.hidebox($, $(this)) 
       }) 

Answer 1

Można wykorzystać setTimeout() i anonimowej funkcji tego:

$target.mouseleave(function(e){ 
var $tooltip=$("#"+this._tipid); 
setTimeout(function() { ddimgtooltip.hidebox($, $tooltip); }, 250); 
}) 

To opóźniłoby to 250ms po opuszczeniu przed ukryciem, możesz po prostu dostosować tę wartość w razie potrzeby.

Answer 2

Problem z zegarem byłby tylko wtedy, gdyby po lewej stronie myszy, a następnie ponownie wprowadzone, nadal będzie się ukrywać po zakończeniu tego czasu. Coś takiego jak poniżej może działać lepiej, ponieważ możemy anulować timer za każdym razem, gdy mysz wejdzie w cel.

var myTimer=false; 
$target.hover(function(){ 
    //mouse enter 
    clearTimeout(myTimer); 
}, 
function(){ 
    //mouse leave 
    var $tooltip=$("#"+this._tipid); 
    myTimer = setTimeout(function(){ 
     ddimgtooltip.hidebox($, $tooltip); 
    },500) 
}); 

Answer 3

(function($){ 
    $.fn.lazybind = function(event, fn, timeout, abort){ 
     var timer = null; 
     $(this).bind(event, function(){ 
      timer = setTimeout(fn, timeout); 
     }); 
     if(abort == undefined){ 
      return; 
     } 
     $(this).bind(abort, function(){ 
      if(timer != null){ 
       clearTimeout(timer); 
      } 
     }); 
    }; 
})(jQuery); 


$('#tooltip').lazybind(
    'mouseout', 
    function(){ 
     $('#tooltip').hide(); 
    }, 
    540, 
    'mouseover'); 

http://www.ideawu.com/blog/2011/05/jquery-delay-bind-event-handler-lazy-bind.html

Answer 4

Można użyć tej funkcji po prostu napisał:

$.fn.hoverDelay = function(handlerIn, handlerOut, delay) { 
    if(delay === undefined) delay = 400; 
    var timer; 
    this.hover(function(eventObject) { 
     clearTimeout(timer); 
     handlerIn.apply(this,eventObject); 
    }, function(eventObject) { 
     timer = setTimeout(handlerOut.bind(this, eventObject), delay); 
    }); 
}; 

To działa jak normalny $.hover wyjątkiem jest 400ms opóźnienie przed wydarzeniem urlopu myszy jest call (który zostanie anulowany, jeśli ponownie włączysz mysz w tym przedziale czasowym).