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;
}

代码工作正常，除非您在淡入/淡出转换序列完成之前单击按钮。如果您在转换期间点击，那么＆＃34; alert_itemadded＆＃34;元素仍将正确淡化，但随后立即隐藏而不会正常淡出。知道如何解决这个问题吗？

我尝试过的事情并没有取得成功：

使用addClass＆amp; removeClass而不是toggleClass。
在按钮点击事件后立即添加$（＆＃39; .alert_itemadded＆＃39;。）finish（）以终止当前正在运行的转换。

非常感谢任何帮助。提前谢谢。

Answer 1

您可以在转换结束后禁用该按钮并再次启用它。像这样：

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

Answer 2

遗憾的是，我仍然无法弄清楚如何获得我想要的效果（前一次过渡完全停止，并且新的过渡会像平常一样再次启动）。我最后简单地添加了一个T / F变量，表明转换是否正在进行中。如果是，我忽略了正常的按钮点击代码。

希望这种解决方法可以帮助其他人。如果我最终弄清楚如何以正确的方式重新启动转换，我将在此处发布该解决方案。

jQuery在重复触发时启动了CSS过渡故障

2 个答案: