setTimeout與TweenMax懸停

我試圖在懸停時添加setTimeout以避免錯誤，如果鼠標在鏈接上快速移動。setTimeout與TweenMax懸停

我試過一個簡單的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); 
    }) 
})

如果你有任何想法，我會很高興！

來源

2017-10-28 Léo Durand

我做了筆爲您

HoverIntent CodePen

只需添加hoverintent到腳本的jQuery後，再更換JS任何懸停呼叫與hoverIntent

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

來源

2017-10-30 03:07:44 Zuriel

有沒有一種方法，使之只有jQuery？另外，我不明白它是做什麼的？ –

https://briancherne.github.io/jquery-hoverIntent/它是jQuery的補充。它有什麼作用？轉到該演示示例，並快速移動鼠標在4個方塊上來回移動。當你停止移動時，所有人都會保持動畫，因爲他們被動了。 HoverIntent有一個初始延遲，您可以自定義，以防止函數在超時完成後運行，然後運行，您可以快速移動鼠標以查看其他示例並查看其差異。 – Zuriel

該鏈接的第一個演示是正常的jQuery沒有hoverintent。其餘的鏈接是用hoverIntent來顯示好處 – Zuriel

setTimeout與TweenMax懸停

回答

相關問題