Why doesn't my message fade out as expected?-CodePudding

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/[email protected]/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 >
        <div >
            <div  role="alert">
                <h4>Logged Out Successfully!</h4>
                <button type="button"  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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
  <div >
    <div  role="alert">
      <h4>Logged Out Successfully!</h4>
      
      <button type="button"  data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      </button>
      
      <p>{{ msg }}</p>
    </div>
  </div>
</div>

CodePudding user response：

Remove the redundant and very old version 1.9 of jQuery.
Use the full version of jQuery 3. Slim doesn't have effects functions.
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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div >
  <div >
    <div  role="alert">
      <h4>Logged Out Successfully!</h4>
      
      <button type="button"  data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      </button>
      
      <p>{{ msg }}</p>
    </div>
  </div>
</div>