javascript - 弹出成功并淡出 AJAX 成功

Question

我想在成功时显示一个最初隐藏的警报，然后在几秒钟后将其淡出。

我不知道为什么我做错了，这看起来很简单。

这是我的方法，我的 PHP:

<div class="alert alert-success" id="success-alert">
      <button type="button" class="close" data-dismiss="alert">x</button>
       <strong>Success!</strong>
 </div>

还有我的 JavaScript(AJAX 部分):

$.ajax({
            type: 'POST',

            url: 'note.php',
            data: { note: note, request_id: request_id, cve: cve, note_id: note_id, status: status,
                    },

            success: function(msg){  
               $("#success-alert").hide();
                $(".add-note").click(function showAlert() {
                $("#success-alert").alert();
                $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
               $("#success-alert").alert('close');
                });   
            });

            }
        });

结果是警报最初并未隐藏，因为它在成功时隐藏。

我还尝试使用 hide 类并删除 $("#success-alert").hide(); 部分。

我开始认为这是不可能实现的，要在 AJAX 成功的情况下做到这一点，我已经想出了另一个(但更糟糕的是，因为它不是成功的)解决方案。

$(document).ready (function(){
            $("#success-alert").hide();
            $(".add-note").click(function showAlert() {
                $("#success-alert").alert();
                $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
               $("#success-alert").alert('close');
                });   
            });
 });

结果是它只在第一次点击时起作用，第二次点击按钮不起作用，只有当我刷新页面时。

我尝试过的另一个解决方案是将代码分为:

$(document).ready (function(){
            $("#success-alert").hide();

 });
$(".add-note").click(function showAlert() {
                $("#success-alert").alert();
                $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
               $("#success-alert").alert('close');
                });   
            });

结果是我的提示出现一瞬间又瞬间消失。

我该如何解决这个看似简单的问题？非常感谢。

Answer 1

HTML

<div class="alert alert-success" id="success-alert" style="display:none"> Success Message</div>

成功回调

$("#success-alert").show();
setTimeout(function() { $("#success-alert").hide(); }, 5000);