如何防止mouseenter/mouseleave事件動畫「交叉」？

Question

目前，我有以下腳本供電動態的div內容：通過允許用戶從一系列從標誌塊，然後帶來了特別的div內容旁邊的標誌標識的選擇

$("a.mbl").click(function() { 

    var mblid = $(this).attr("id"); 

    $("#mid-box-left").fadeOut(250, function() { 
     $("#mid-box-left").html($("#mbl" + mblid).html()) 
     .hide() 
     .fadeIn(250, function() { 
      $('#mid-box-left') 

      $("#mid-box").on("mouseenter", "a.testbox", function() { 

       var tbid = $(this).attr("id"); 

       $("#mid-box-right").fadeOut(250, function() { 
        $("#mbr" + tbid).css("display", "block") 
        .hide() 
        .fadeIn(250, function() { 
         $("#mbr" + tbid) 
        }); 
       }); 
      }); 

      $("#mid-box").on("mouseleave", "a.testbox", function() { 

       var tbid = $(this).attr("id"); 

       $("#mbr" + tbid).fadeOut(250, function() { 
        $("#mbr" + tbid).css("display", "none"); 
        $("#mid-box-right").fadeIn(250); 
       }); 
      }); 
     }); 
    }); 
    return false; 
}) 

該功能可以運行。然後用戶將鼠標懸停在該div內容上，隱藏的div會在徽標塊的頂部淡出。當他們離開div時，隱藏的div會淡出，並且徽標塊會回退。

我遇到的問題是，當用戶移動鼠標移出並進入a.testbox區域的速度太快時，兩個動畫似乎衝突，導致隱藏的div內容和徽標塊同時出現。

如果用戶將鼠標移出或移入相關的div「過於困難」，或者阻止我看到這種重疊的另一種方式，有什麼辦法可以防止過渡動畫觸發？

Answer 1

您可以使用做一個is(':animated')檢查您想要動畫的元素，看它的當前是否動畫。如果支票返回false，則需要觸發動畫。