jQuery和Bootstrap向上滑动警报

Question

I have an alert:

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

I have a button:

<input name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" type="submit" method="post">

When the button is clicked, the alert appears. I want the alert to slide up slowly using jQuery's .slideUp() . Here is my attempt:

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

This causes the alert to appear, and then abruptly disappear quickly (shorter than two seconds). I believe the alert is somehow being called twice, because when I change the 500 (all three) to 2000 , the alert shows up, it slides up correctly, then a new alert appears and abruptly disappears.

How should I achieve the slow slide up, once?

Answer 1

The classes "fade" and "show" are the reason for the weird behavior in your code.

Is this what you're looking for?

JS FIDDLE DEMO

I got rid of those classes and added some CSS.

Relevant code:

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

Hope this helps. :)