jQuery animate - désactiver jusqu'à complète

Question

J'ai ce bit de code qui anime l'arrière-plan quand un élément avec une classe jq est survolé. Le code sélectionne la couleur de fond actuelle et l'anime à une nouvelle couleur, puis à la sortie de la souris, la couleur revient à l'original. Si l'action est effectuée trop rapidement les uns après les autres, le code récupère la couleur d'arrière-plan de l'élément avant de revenir complètement à l'original. Ainsi, j'ai besoin d'avoir quelque chose du genre de la fonction complete() et if de jQuery animate function, mais apparemment cela n'a pas fonctionné pour moi. Comment désactiver le code pour le temps nécessaire à l'animation pour terminer?

$(document).ready(function(){ 

      var isHovered = false; 
      $(".jq").hover( 

       if(!isHovered) {    
        isHovered = true; 
        function(){ 
         var bgcol = $(this).css('backgroundColor'); 
         $(this).animate({  
          backgroundColor: "#DDD", 
          color:"#111" 
         }, trans).data('hoverbackground', bgcol); 
        }, 
        function() {  
         $(this).animate({ 
          backgroundColor: $(this).data('hoverbackground'), 
          //backgroundColor: "#EFEFEF", 
          color:"#888" 
         }, trans, complete: function() { 
         isHovered = false;}).removeData('hoverbackground'); 
        } 
        });       
       }); 

Answer 1

Je l'ai résolu, en résolvant partiellement le problème. Le comportement est supprimé jusqu'à ce que l'animation soit terminée, mais en faisant référence à tout élément jq classed dans la fonction, son élément isHovered affecte tout autre élément qui est survolé immédiatement après. En d'autres termes, la fonction ne distingue pas l'élément sur lequel l'animation est terminée.

$(".jq").hover( 


       function(){ 

        if(!isHovered) { 
        isHovered = true; 
         var bgcol = $(this).css('backgroundColor'); 
         $(this).animate({  
          backgroundColor: "#DDD", 
          color:"#111" 
         }, trans).data('hoverbackground', bgcol); 
       }}, 
       function() { 

        $(this).animate({ 
         backgroundColor: $(this).data('hoverbackground'), 
         //backgroundColor: "#EFEFEF", 
         color:"#888" 
        }, trans, function() { 
        isHovered = false;}).removeData('hoverbackground'); 

       }); 

    });