Javascript jQuery在反复触发时启动了CSS转换

我试图在按下按钮时快速淡入淡出一个元素。以下是jQuery和CSS代码：

$“按钮”。单击一次，函数{ $'.alert_itemsadded'.show0，函数{ $'.alert_itemadded'.toggleClass'alert_itemadded_fade'； $'.alert_itemadded'.一个'transitionend'WebKittTransitionEnd'函数{ setTimeoutfunction{ $'.alert_itemadded'.toggleClass'alert_itemadded_fade'； $'.alert_itemadded'.一个'transitionend'WebKittTransitionEnd'函数{ $'.alert_itemsadded'.hide； }; }, 300; }; }; }; .alert_项目已添加{ 显示：无； 不透明度：0； 过渡：所有0.8秒缓解； -webkit过渡：所有0.8秒轻松； 宽度：50px； 高度：50px； 背景色：红色； } .alert\u Items已添加\u fade{ 不透明度：1； 过渡：所有0.4s缓解； -webkit过渡：所有0.4s易用性； } 除了在fadein/out转换序列完成之前单击按钮外，代码工作正常。如果在转换过程中单击，alert_itemadded元素仍将正确淡出，但随后会立即隐藏，而不会正确淡出。你知道如何解决这个问题吗

我尝试过但没有成功的事情：

使用addClass&removeClass而不是toggleClass。 正在添加$'.alert_itemsadded'。在按钮单击事件后立即完成，以终止当前正在运行的转换。

---

任何帮助都将不胜感激。提前感谢。

您可以禁用该按钮，并在转换结束后再次启用它。大概是这样的：

$('#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);
        });
    });
});

---

不幸的是，我仍然无法找到如何在前一个过渡完全停止的地方获得我想要的效果，而新的过渡又像正常一样重新开始。最后，我简单地添加了一个T/F变量，它指示是否正在进行转换。如果是，我忽略了正常的按钮点击代码

---

希望此解决方案能帮助其他人。如果我最终发现如何以正确的方式重新启动此转换，我将在这里发布该解决方案。

我上面介绍的是对实际场景的一点简化。每次单击按钮时，我都需要重新启动转换序列，无论转换是否已在运行。