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);
});

希望这会有所帮助。 :)