為什么我的jQuery過渡有問題？

Question

我有一個帶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);    
   });

});

這是運行中的腳本

Answer 1

看起來問題在於，在完成fadeIn()動畫之前，您不fadeIn() .overlay-t1文本，而在mouseleave上，您要在動畫開始前立即將.overlay-t1 fadeOut()文本移出。 當您以比初始動畫更快的速度移入和移出鼠標時，代碼將淡出文本，然后再次淡入（您所看到的問題）。

一種可能的解決方案是稍微更改您的底部（木耳）功能，使其更類似於頂部（鼠標器）功能。 就像是：

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

.stop（）可以防止有人向盒子發送垃圾郵件時反復播放動畫。

現場演示

Answer 2

不確定jani動畫在幕后如何工作，但是有可能使用javascript動畫而不是css過渡。 css過渡的好處是，它可以在動畫開始之前進行所有動畫計算，並且是硬件加速的。 Javascript在很高的級別上受調度程序的支配，因此它將永遠是斷斷續續的。

嘗試jquery運輸。

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