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

Надеюсь это поможет.:)