javascript - 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 FIDDLE DEMO

我删除了这些类并添加了一些 CSS。

相关代码:

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

希望这有帮助。 :)