jQuery 如果鼠标悬停 2 秒。开始动画或根本不动画

Question

情况是这样的： 我有一个产品列表，其中连续有 4 个产品。 当您将鼠标悬停在其中一种产品时，会显示工具提示。我担心的是，如果您在产品上从左到右快速移动鼠标，您会看到所有显示的工具提示几秒钟。我想知道我是否可以对 jQuery 说，只有当鼠标悬停在产品上 2 秒时才开始动画。因此，如果您将鼠标悬停在产品上 1 秒钟。然后鼠标移开，动画根本不会开始。 我正在使用 jQuery 1.2.6，这是我的工具提示代码：

$(document).ready(function(){
$('.thumb-image').hover(function() {
    $(".thumb-image").mousemove(function(e){
        $(this).find(".t-desc").filter(":not(:animated)").fadeIn(500);
            $(this).find(".t-desc").css({
                top: (e.pageY + 27) + "px",
                left: (e.pageX - 20) + "px"     });
    }); 
    }, function() {
        $(this).find(".t-desc", this).fadeOut(250);             
}); 
});

Answer 1

我的朋友这就是您所需要的： jQuery HoverIntent 插件

Answer 2

当您悬停时设置一个计时器，并且仅当悬停持续时间超过该时间时才显示提示。如果在计时器触发之前离开当前对象，则会取消未完成的计时器。如果在提示显示后离开当前对象，则会将其淡出。

我还添加了几个 .stop(true, true) 方法调用，以防任何先前的动画正在进行，以便可以停止并加速到结束位置。如果鼠标在淡入完成之前离开，则可能会发生这种情况。由于 2 秒的延迟，淡出可能不需要它，但它不会造成伤害，并且可以防止某些边缘情况。

你可以这样做：

$(document).ready(function(){
    var tipTimer = null;
    $('.thumb-image').hover(function() {
        var self = this;
        if (tipTimer) {
            clearTimeout(tipTimer);
            tipTimer = null;
        }
        tipTimer = setTimeout(function() {
            tipTimer = null;
            $(self).find(".t-desc").filter(":not(:animated)").stop(true, true).fadeIn(500);
                $(self).find(".t-desc").css({
                    top: (e.pageY + 27) + "px",
                    left: (e.pageX - 20) + "px"});
            }, 2000);
        }, function() {
            if (tipTimer) {
                clearTimeout(tipTimer);
                tipTimer = null;
            }
            $(this).find(".t-desc", this).stop(true, true).fadeOut(250);             
    }); 
});

Answer 3

您应该使用 mouseenter 和 mouseleave。

在 mouseenter 上，启动 setTimeout 将动画延迟 2 秒。
在 mouseleave 上，清除超时。

因此，如果鼠标悬停时间少于 2 秒，则不会显示任何内容。

请询问您是否需要一个实际示例。

编辑 ：
所以，我会尝试这个：

$(document).ready(function(){

    var timer;
    $('.thumb-image').bind('mouseenter',enter).bind('mouseleave',leave);

    function enter(){
        var $this = $(this);
        clearTimeout(timer);
        timer = setTimeout(function()
        {
                $this.find(".t-desc").filter(":not(:animated)").fadeIn(500);
                $this.find(".t-desc").css({
                    top: (e.pageY + 27) + "px",
                    left: (e.pageX - 20) + "px"     });
            },2000);
    }); 

    function leave() {
        var $this = $(this);
        clearTimeout(timer);
        $this.find(".t-desc", this).fadeOut(250);             
    }); 

});

...但我不能确定它是否会在不查看你的代码的情况下工作。

Answer 4

好的，我的一个朋友帮助了我，这是完美运行的最终代码：

$(document).ready(function(){
var tipTimer = null;
$(".thumb-image").mouseover(function(){
    var self = this;
    $(self).bind('mousemove', function(e){                
        $(self).find(".t-desc").css({
            top: (e.pageY + 27) + "px",
            left: (e.pageX - 20) + "px"
        }); 
    });
    if (tipTimer) {
        clearTimeout(tipTimer);
        tipTimer = null;
    }
    tipTimer = setTimeout(function() {
        tipTimer = null;
        $(self).find(".t-desc").filter(":not(:animated)").stop(true, true).fadeIn(500);
        }, 600);      

}).mouseout(function(){
        $(this).unbind('mousemove');
        if (tipTimer) {
            clearTimeout(tipTimer);
            tipTimer = null;
        }
        $(this).find(".t-desc", this).stop(true, true).fadeOut(250);
});

});