Question

我试图在悬停时添加一个setTimeout，以避免鼠标在链接上快速移动时出现错误。

我尝试了一个简单的setTimeout但没有尝试

setTimeout(function over(){
  TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"})
  TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"});
  TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut});
}, 200);

以及此代码，但没有找到使其工作...

$(document).ready(function(){
    var delay=200, setTimeoutConst;
    $('.thumb').hover(function(){
        setTimeoutConst = setTimeout(function(){
            $(".thumb").hover(over, out);
            function over(){
                TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"})
                TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"});
                TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut});
            }
            function out(){
                TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut})
                TweenMax.to($(this).find(".view_thumb"), 0.2, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut})
                TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"0" , ease:Power2.easeOut});
            }
        }, delay);
    },function(){
        clearTimeout(setTimeoutConst );
    })
})

如果您有任何想法，我会很高兴！

Answer 1

我为你做了一支笔

HoverIntent CodePen

只需在jQuery之后将hoverintent添加到脚本中，然后使用hoverIntent替换JS中的任何悬停调用

    $(".thumb").hoverIntent(over, out);

setTimeout悬停在TweenMax上

1 个答案: