jQuery 和 Bootstrap 向上滑动警报

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>

这会导致警报出现，然后突然快速消失（不到两秒）。我相信该警报以某种方式被调用了两次，因为当我将500（所有三个）更改为2000时，警报会显示，它会正确向上滑动，然后出现一个新警报并突然消失。

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

Answer 1

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

这是您要找的吗？

JS 小提琴演示

我去掉了这些类并添加了一些 CSS。

相关代码：

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

希望这可以帮助。:)