Javascript jQuery&；引导向上滑动警报

我有一个警报：

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

这会导致警报出现，然后迅速突然消失（不到两秒）。我相信警报会被调用两次，因为当我将

500

（所有三个）更改为

2000

，警报会显示，它会正确地向上滑动，然后会出现一个新警报并突然消失

我应该如何实现一次缓慢的向上滑动？

类“fade”和“show”是代码中奇怪行为的原因

这就是你要找的吗

我去掉了那些类并添加了一些CSS

相关代码：

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

希望这有帮助。：）

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

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