鼠标悬停2秒钟时使用的jQuery.开始动画或根本不动画 [英] jQuery if mouse is over for 2 sec. begin animation or don't animate at all

问题描述

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

This is the situation: I have a product list with 4 product in a row. When you hover one of the products, a tooltip is shown. My concern is that if you move your mouse quickly from left to right or whatever over the products, you get all of the tooltips shown for a few seconds. I wonder if I can say to jQuery to start the animation only if the mouse is over the product for 2 seconds. So if you let your mouse over the product for 1 sec. and then mouse out, the animation won't start at all. I'm using jQuery 1.2.6 and this is my code for the tooltips:

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

推荐答案

这是您需要的我的朋友: jQuery HoverIntent插件

This my friend is what you need: jQuery HoverIntent plugin

这篇关于鼠标悬停2秒钟时使用的jQuery.开始动画或根本不动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！