jQuery反复触发时启动CSS过渡故障

我试图在按下按钮时快速淡入和淡出元素。这是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（）以终止当前正在运行的转换。

任何帮助将非常感激。先感谢您。