jQuery animate - 禁用直到完成

Question

我有這樣一段代碼，當一個帶有jq類的元素被懸停在上面時，它可以動畫化背景。代碼拾取當前背景顏色並將其設置爲新顏色，然後在鼠標移出時顏色將恢復爲原始顏色。如果一個接一個地執行動作的速度太快，代碼將在完全恢復到原始之前拾取元素的背景色。因此，我需要擁有諸如jQuery animate函數complete（）和if語句之類的東西，但顯然它對我沒有任何作用。 如何禁用代碼以完成動畫所需的時間？

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

我把它整理出來，部分解決了這個問題。行爲被移除直到動畫完成，但通過引用函數中的任何jq分類元素使其元素isHovered影響任何其他立即懸停的元素。換句話說，該函數並不區分動畫完成的元素。

$(".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'); 

       }); 

    });