使动态警报出现的按钮仅工作一次然后停止答案

【问题标题】：Button to make dynamic alert appear works only once then stops使动态警报出现的按钮仅工作一次然后停止
【发布时间】：2016-11-11 16:15:54
【问题描述】：

我正在使用 Bootstrap，我有一个可折叠的 div，它在按下按钮时出现，然后在 5 秒后消失。问题是，它只能工作一次。当我再次按下按钮时，在 div 消失后，什么也没有发生。我该怎么做才能使按钮再次按下后重复该动作？这是我的代码：

<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="collapse" data-target="#aparecer1">
    Suscribir
</button>

<div id="aparecer1" class="alert alert-warning collapse">
    This is an alert
</div>

$("button").click(function() {
    setTimeout(function() {
        $('#aparecer1').fadeOut('fast');
    }, 5000); 
});

非常感谢！

【问题讨论】：

标签： jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

它不起作用有两个原因。首先，fadeOut() 调用导致 display: none 被设置在元素内联上，这会覆盖样式以在下次单击时显示元素。它需要被删除。您还需要删除 Bootstrap 添加的元素上的 in 类。你可以在fadeOut()的回调中做这两个动作，像这样：

$("button").click(function() {
    setTimeout(function() {
        $('#aparecer1').fadeOut('fast', function() {
            $(this).css('display', '').removeClass('in');
        });
    }, 5000);
});

Example fiddle

【讨论】：

【解决方案2】：

不要完全隐藏您的警报标签。只需删除 Class insted 即可解决您的问题。

 $("button").click(function() {
    setTimeout(function() {
       $('#aparecer1').removeClass('in');
    }, 5000); 
 });

Updated Fiddle

【讨论】：

这会移除 OP 原本拥有的淡出动画。
啊是的忘记了淡入淡出动画.. :D