jQuery Hover() und wie man es zum reibungslosen Arbeiten

Question

Ich habe den folgenden Code, um ein Karussell zu implementieren, wenn Benutzer Hover nach dem Zufallsprinzip für ein paar Sekunden ausführt, sieht es aus wie jquery Hover() legt sie in eine Warteschlange und führe alles aus. Wie ich möchte, dass das Karussell funktioniert, führe nur den letzten Hover aus.

$('#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

Versuchen .stop() vor Ihrer hide und show Funktionen. stop() stoppt die aktuelle Animation, so dass der nächste sofort starten kann. Ich benutze es manchmal, um solche Event-Queuing zu verhindern.

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

Answer 2

Im Hover-Ereignis können Sie eine Variable des letzten Elements anzeigen, die angezeigt werden soll. Dann überprüfen Sie diese Variable in Ihrer Callback-Funktion für die Show. Das macht ein Maximum von 2 zeigen/verbirgt, wenn sie nur wild über Dinge bewegen und kein Stottern, wenn Sie .stop() verwenden Ich schrieb das folgende wirklich schnell, aber Sie sollten die Idee bekommen.

$('#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(); 
    } 
}