ダイナミックアラートを表示させるボタンは1回だけ動作してから停止します

Question

私はブートストラップを使用していますが、ボタンを押すと表示される折りたたみ可能な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); 
}); 

どうもありがとう！

Answer 1

動作しない理由は2つあります。最初に​​コールの結果がdisplay: noneという要素がインライン要素に設定され、次のクリック時に要素を表示するスタイルが上書きされます。それは削除する必要があります。また、ブートストラップによって追加される要素上のinクラスも削除する必要があります。

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

Example fiddle

Answer 2

完全にあなたの警告タグを非表示にしないでください：あなたはこのように、​​のコールバックでこれらのアクションの両方を行うことができます。 Classを削除するだけで問題が解決されます。

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

Updated Fiddle