Question

我在我的网站上使用此代码，我想知道如何为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

只有一个计时器的问题是，如果你向左鼠标然后重新输入，它仍然会在该计时器完成后隐藏。像下面这样的东西可能会更好，因为我们可以在鼠标进入目标时取消计时器。

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 2

(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 3

您可以使用setTimeout()和匿名函数：

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

这会在它隐藏之前离开后延迟250ms，你可以根据需要调整该值。

Answer 4

你可以使用我刚刚写的这个函数：

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

它的工作方式与普通的$.hover相同，只是在调用鼠标离开事件之前有400毫秒的延迟（如果你在那个时间范围内将鼠标移回，则会被取消）。

在jquery中为mouseleave添加延迟

4 个答案: