爲什麼我的jQuery過渡很糟糕？

我有一個CSS的覆蓋，這將工作正常，如果用戶鼠標一秒鐘或更多....但是如果用戶鼠標快速覆蓋文本保持放置沒有覆蓋的背景。這裏是我的jQuery代碼：爲什麼我的jQuery過渡很糟糕？

$(".cascade-t1").hover(function(){ 
$(".cascade-corner").fadeOut(); 
$(".overlay-t1").animate({"left": "-300px"}, 300, function(){ 
    $(".cascade-overlay-content").fadeIn(200);  
}); 


}, function(){ 

    $(".cascade-corner").fadeIn(); 
    $(".cascade-overlay-content").fadeOut(200, function(){ 
    $(".overlay-t1").animate({"left": "130px"}, 300);  
    }); 

});

這裏是the script in action

來源

2014-01-23 Skullomania

http://jsfiddle.net/eY3yC/1/這並不解決您的問題（這將防止動畫疊加）。但它對我來說並不是什麼問題 – bbuecherl

http://jsfiddle.net/DerekL/eY3yC/2/ –

不知道如何動畫jQuery的引擎蓋下的作品，但它可能它使用JavaScript，而不是動畫CSS轉換。 css轉換的好處是它在動畫開始之前完成所有的動畫計算並且是硬件加速的。 JavaScript是在調度程序的擺佈處於非常高的水平，所以它將始終是波濤洶涌。

試試jquery transit。

http://ricostacruz.com/jquery.transit/

來源

2014-01-23 17:34:50

他在問爲什麼動畫在圖像上方移動光標時會慢慢響應。 –

它看起來像問題是，你不fadeIn()的.overlay-t1文本，直到的mouseenter動畫完成，並在鼠標離開你文本動畫之前出來的時候了。當您將鼠標移入和移出的速度超過初始動畫時，代碼會淡出文本，然後再次淡入（您遇到的問題）。

一個可能的解決方案是稍微改變你的底部（mouseleave）函數，使其更接近你的頂部（mouseenter）函數。喜歡的東西：

$(".cascade-corner").fadeIn(); 
$(".overlay-t1").stop(true, true).animate({"left": "130px"}, 300, function() { 
    $(".cascade-overlay-content").fadeOut(200); 
});

的.stop（）也可把動畫從打過去，當有人修建垃圾箱子了。

FIDDLE DEMO

來源

2014-01-23 18:00:58 badAdviceGuy

爲什麼我的jQuery過渡很糟糕？

回答

相關問題