demora a MouseLeave en jQuery

Question

Estoy usando este código en mi sitio y me preguntaba cómo podría añadir un retardo a la función 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

Puede utilizar setTimeout() y una función anónima para esto:

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

Esto lo retrasaría 250ms después de salir antes de que se oculte, solo puede ajustar ese valor según sea necesario.

Answer 2

El problema con sólo un temporizador habría si izquierdo del ratón y luego volvió a entrar todavía ocultaría después de que el temporizador ha completado. Algo como lo siguiente podría funcionar mejor porque podemos cancelar el temporizador cada vez que el mouse ingresa al objetivo.

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

Puede utilizar esta función que acabo de escribir:

$.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); 
    }); 
}; 

Funciona igual que la normal de $.hover excepto que hay un retraso de 400 ms antes del evento licencia ratón es llamado (que se cancela si mueve el mouse dentro de ese marco de tiempo).