jQuery hover（）とシームレスに動作させる方法

Question

私はカルーセルを実装するためのコードを持っています。ユーザがホバーをランダムに数秒間実行するとjquery hover（）がキューに入れられます。すべてを実行する。そのカルーセルをどのように動作させたいのかは、最新のホバーのみを実行することです。

$('#broker_carousel_controls li a').hover(function (e) {    
     e.preventDefault(); 
     var t = $(this); 
     var speed = 'fast'; 
     $('#broker_carousel_controls li a.bcc_active').removeClass('bcc_active'); 
     var idx = $('#broker_carousel_controls li a').index(t); 
     t.addClass('bcc_active'); 

     $('#broker_carousel li:visible').hide(speed, function() { 

     }); 
     $('#broker_carousel li').eq(idx).show(speed, function() { 
      //busy = false;    
     }); 


    }, function() { }); 

Answer 1

あなたhideとshow機能前.stop()を使用してみてください。 stop()は現在のアニメーションを停止し、次のアニメーションがすぐに開始できるようにします。このようなイベントキューイングを防ぐために時々使用します。

$('#broker_carousel li:visible').stop().hide(speed, function() { 
}); 
$('#broker_carousel li').eq(idx).stop().show(speed, function() { 
    //busy = false;    
}); 

Answer 2

ホバーイベントでは、必要な最後の項目の変数を保持することができます。次に、コールバック関数の変数がshowであることを確認します。これは、2つの表示/非表示を最大にします。それらが物事を激しく動かしていて、使用時に吃音がない場合は、.stop()私は以下のような速い記述をしました。

$('#broker_carousel_controls li a').hover(CarouselHover 
, function() { }); 

var lastQueue = null; 
function CarouselHover(e) 
{ 
     e.preventDefault(); 
     if (lastQueue == null) 
     { 
      lastQueue = this; 
      StartHoverShow(); 
     } 
     else 
     { 
      lastQueue = this; 
     } 
} 

function StartHoverShow() 
{ 
     if (lastQueue != null) 
     { 
     var t = $(lastQueue); 
     lastQueue = null; 
     var speed = 'fast'; 
     $('#broker_carousel_controls li a.bcc_active').removeClass('bcc_active'); 
     var idx = $('#broker_carousel_controls li a').index(t); 
     t.addClass('bcc_active'); 

     $('#broker_carousel li:visible').hide(speed, function() { 

     }); 
     $('#broker_carousel li').eq(idx).show(speed, function() { 
      //busy = false; 
      ShowCallback(); 
     }); 
     } 
} 

function ShowCallback() 
{ 
    if (lastQueue != null) 
    { 
    StartHoverShow(); 
    } 
}