Search code examples
htmljqueryflaskflash

Why doesn't my message fade out as expected?

I'm trying to use jQuery to let the notification fade in and fade out automatically. However, the jQuery is not working at all and I have to manually close the notification. May I know what is the problem?

The script and bootstrap that I have linked

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

The notification

{% with loggedout = get_flashed_messages(category_filter=["loggedout"]) %}
{% if loggedout %}
    {%- for msg in loggedout %}
    <div class="position-relative">
        <div class="rightbtm flash">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <h4>Logged Out Successfully!</h4>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button> 
                <p>{{ msg }}</p>
            </div>
        </div>
    </div>
    {% endfor -%}
{% endif %}
{% endwith %}

<script>
    $(function() {
       $('.flash').delay(500).fadeIn('normal', function() {
          $(this).delay(2500).fadeOut();
       });
    });
</script>

The notification on right bottom corner

enter image description here

$(function() {
  $('.flash').delay(500).fadeIn('normal', function() {
    $(this).delay(2500).fadeOut();
  });
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
The notification

<div class="position-relative">
  <div class="rightbtm flash">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <h4>Logged Out Successfully!</h4>
      
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      </button>
      
      <p>{{ msg }}</p>
    </div>
  </div>
</div>

Solution
    1. Remove the redundant and very old version 1.9 of jQuery.
    2. Use the full version of jQuery 3. Slim doesn't have effects functions.
    3. You apparently don't need the fadeIn() function as you're disabling it with 'normal' as a duration. Just use show().

    $(function() {
  $('.flash').delay(500).show(function() {
    $(this).delay(2500).fadeOut();
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="p-2">
  <div class="rightbtm flash">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <h4>Logged Out Successfully!</h4>
      
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      </button>
      
      <p>{{ msg }}</p>
    </div>
  </div>
</div>