为何通知未按预期自动淡入淡出？jQuery失效问题求助

引入的脚本和Bootstrap资源 #

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

通知HTML代码（Flask模板） #

{% 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 %}

淡入淡出实现脚本 #

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

通知显示效果 #

代码示例片段 #

JavaScript #

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

HTML #

<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>
通知示例

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

问题排查与解决 #

1. jQuery版本冲突且缺失动画功能

同时引入jQuery 1.9.1完整版和3.3.1 slim版会导致版本覆盖，而slim版移除了动画相关API（如fadeIn/fadeOut），这是动画失效的核心原因。

2. 元素初始状态未隐藏

.flash元素默认处于显示状态，fadeIn仅对display: none的元素生效，需添加初始隐藏样式。

3. Bootstrap过渡类冲突

Bootstrap的fade show类自带过渡效果，与jQuery动画叠加会导致逻辑混乱。

修复后的完整方案 #

修正资源引入（仅保留完整版jQuery+Bootstrap JS）

<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/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

添加初始隐藏样式

.flash {
    display: none;
}

修正动画脚本（兼容Bootstrap alert关闭逻辑）

$(function() {
    $('.flash').delay(500).fadeIn('normal', function() {
        const $alert = $(this).find('.alert');
        $(this).delay(2500).fadeOut(function() {
            // 动画结束后调用Bootstrap方法清理alert DOM
            $alert.alert('close');
        });
    });
});

可选：调整通知模板移除冲突类

{% 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 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 %}

内容的提问来源于stack exchange，提问作者Fallen Hamster