jQuery發起的CSS轉換時反覆觸發出毛孔

Question

我想淡入一個元素快速按下按鈕。這裏的jQuery和CSS代碼：

$('#button').on("click", function() { 
    $('.alert_itemadded').show(0, function() { 
     $('.alert_itemadded').toggleClass('alert_itemadded_fade'); 
     $('.alert_itemadded').one('transitionend webkitTransitionEnd', function() { 
      setTimeout(function() { 
       $('.alert_itemadded').toggleClass('alert_itemadded_fade'); 
       $('.alert_itemadded').one('transitionend webkitTransitionEnd', function() { 
        $('.alert_itemadded').hide(); 
       }); 
      }, 300); 
     }); 
    }); 
}); 

.alert_itemadded { 
    display: none; 
    opacity: 0; 
    transition: all 0.8s ease; 
    -webkit-transition: all 0.8s ease; 
    width: 50px; 
    height: 50px; 
    background-color: red; 
} 
.alert_itemadded_fade { 
    opacity: 1; 
    transition: all 0.4s ease; 
    -webkit-transition: all 0.4s ease; 
} 

的代碼工作正常，但如果你的淡入/出過渡序列完成之前單擊該按鈕。如果在轉換過程中單擊，「alert_itemadded」元素仍然會正常淡入淡出，但會立即隱藏而不會正常淡出。任何想法如何解決這個問題？

事情我已經試過，都沒有成功：

• 使用addClass & removeClass代替toggleClass。
• 在按鈕單擊事件之後立即添加$（'。alert_itemadded'）。finish（）以終止當前正在運行的轉換。

任何幫助將不勝感激。先謝謝你。

Answer 1

我可惜還是沒能弄清楚如何得到我想要的效果（如先前躍遷乾淨停止，新的過渡再次啓動正常人一樣）。我最後只是添加了一個T/F變量，表明是否正在進行轉換。如果是這樣，我忽略了正常的按鈕點擊代碼。

希望此解決方法可以幫助其他人。如果我最終搞清楚如何做到這一轉換重新開始，我會在這裏發佈解決方案。

Answer 2

您可以禁用該按鈕並在轉換結束後再次啓用該按鈕。事情是這樣的：

$('#button').on("click", function() { 
    var button = $(this); 
    button .attr('disabled', 'true'); 
    $('.alert_itemadded').show(0, function() { 
     $('.alert_itemadded').toggleClass('alert_itemadded_fade'); 
     $('.alert_itemadded').one('transitionend webkitTransitionEnd', function() { 
      setTimeout(function() { 
       $('.alert_itemadded').toggleClass('alert_itemadded_fade'); 
       $('.alert_itemadded').one('transitionend webkitTransitionEnd', function() { 
        $('.alert_itemadded').hide(); 
       }); 
       button .attr('disabled', 'false'); 
      }, 300); 
     }); 
    }); 
});