jQueryの＆ブートストラップスライドアップアラート

Question

私は警告があります：私はボタンを持っている

<div class="alert alert-success fade show" id='success-alert' role="alert"> 
     {{ message }} 
     </div> 

を：

<input name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" type="submit" method="post"> 

ボタンをクリックすると、アラートが表示されます。私は、jQueryの.slideUp()を使ってアラートをゆっくりとスライドさせたいと思います。

<script> 
    $(document).ready (function(){ 
       $("#success-alert").hide(); 
       $("#submit-id-submit").click(function showAlert() { 
        $("#success-alert").fadeTo(2000, 2000).slideUp(500, function(){ 
       $("#success-alert").slideUp(500); 
        }); 
       }); 
    }); 
</script> 

アラートが表示され、急速に消えます（2秒未満）。 500（すべて3つ）を2000に変更すると、アラートが表示され、正しくスライドして新しいアラートが表示され、突然消えてしまうため、アラートが何度か2回呼び出されていると思います。

スロースライドを一度達成するにはどうすればよいですか？

Answer 1

"fade"と "show"のクラスがコード内で奇妙な動作をする理由です。

これはあなたが探しているものですか？

JS FIDDLE DEMO

私は、これらのクラスを取り除くと、いくつかのCSSを追加しました。

関連するコード：

$("#submit-id-submit").click(function() { 
    $("#success-alert").show(); // use slide down for animation 
    setTimeout(function() { 
     $("#success-alert").slideUp(500); 
    }, 2000); 
}); 

は、この情報がお役に立てば幸いです。 :)