Question

情况如下：我有一个产品清单，连续4个产品。当您悬停其中一个产品时，会显示工具提示。我担心的是，如果你快速地从左向右移动鼠标或者在产品上移动任何东西，你会得到所有显示的工具提示几秒钟。我想知道如果鼠标在产品上停留2秒钟，我是否可以对jQuery说启动动画。因此，如果您将鼠标放在产品上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 plugin

Answer 2

悬停时设置计时器，如果悬停时间超过该时间，则仅显示提示。如果在计时器触发之前保留当前对象，则取消未完成的计时器。如果在显示提示后离开当前对象，则将其淡出。

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

你可以这样做：

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

}）;

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

4 个答案: