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

Answer 2

在您的ajax请求之前，请确保使用css类或jQuery隐藏警报

$('#sucess-alert').hide();

为了解决您的问题，我一直在使用setTimeout作为延迟，而jQuery的fadeToggle在经过一段时间后隐藏了该元素。

$.ajax({
    type: 'POST',
    url: 'note.php',
    data: {
        note: note,
        request_id: request_id,
        cve: cve,
        note_id: note_id,
        status: status
    },
    success: function(data){
        var fadeDuration = 500;
        var fadeDelay = 2000;

        var successAlert = $('#sucess-alert');

        successAlert.show();
        setTimeout(function() {
            successAlert.fadeToggle(fadeDuration);
        }, fadeDelay);
    }
});

突破成功并淡出AJAX成功

2 个答案: