jQuery hover() et comment le faire fonctionner de façon transparente

Question

J'ai le code suivant pour implémenter un carrousel, lorsque l'utilisateur effectue un survol aléatoire pendant quelques secondes, il semble que jquery hover() les place dans une file d'attente et exécuter tout. Comment je veux que ce carrousel fonctionne est seulement exécuter le dernier vol stationnaire.

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

Essayez d'utiliser .stop() avant vos fonctions hide et show. stop() arrête l'animation en cours pour que la suivante puisse commencer immédiatement. Je l'utilise parfois pour éviter une telle file d'attente d'événements.

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

Answer 2

Dans l'événement hover, vous pouvez conserver une variable du dernier élément à afficher. Ensuite, vérifiez cette variable dans votre fonction de rappel pour show. Cela fait pour un maximum de 2 show/hides si elles bougent tout simplement follement sur les choses et n'a pas de bégaiement lorsque vous utilisez .stop() J'ai écrit le suivant très rapidement, mais vous devriez avoir l'idée.

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