jQuery的，如果鼠标在2秒。开始动画或不动画在所有 [英] jQuery if mouse is over for 2 sec. begin animation or don't animate at all

问题描述

这是这种情况：
我有一排4产品的产品清单。
当您将鼠标悬停的产品之一，工具提示显示。我担心的是，如果你快速移动鼠标从左至右或任何以上的产品，你得到所有数秒显示的工具提示。我不知道如果我可以给jQuery的说，开始只有当鼠标在2秒的产品动画。所以，如果你让你的鼠标产品为1秒。然后鼠标移出，动画将根本无法启动。
我使用jQuery 1.2.6，这是我的code为工具提示：

  $（文件）。就绪（函数（）{
$（'拇指形象）。悬停（函数（）{
    $（拇指图像）。鼠标移动（功能（E）{
        $（本）.find（T-递减。）过滤器（：不是（：动画））。淡入（500）;
            $（本）.find（T-DESC）。CSS（{
                顶部：（e.pageY + 27）+PX
                左：（e.pageX  -  20）+PX}）;
    }）;
    }，函数（）{
        $（本）.find（T-递减，这一点）.fadeOut（250）;
}）;
}）;
 

解决方案

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

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

解决方案

This my friend is what you need: jQuery HoverIntent plugin

这篇关于jQuery的，如果鼠标在2秒。开始动画或不动画在所有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！