如何在AJAX响应消息中调整动画？

Question

执行效果非常好，动画中显示的错误消失了 [x] 秒，您可以关闭ajax发出的消息。

我提出的问题是动画保持活动状态且不应保持活动状态，只有在收到或发出ajax消息时才会显示该消息。

$(document).ready(function() {

  $(".dismiss").click(function() {
    $(".result").fadeOut(500);
  });

  $(document).on('submit', '#code', function() {

    var data = $(this).serialize();
    $.ajax({
      type: 'POST',
      url: 'code_ticket.ini.php',
      data: data,
      beforeSend: function() {
        $(".result").fadeIn(200);
      },
      success: function(response) {
        $(".result").html(response);
        window.setTimeout(function() {
          $('.result').fadeOut(500);
        }, 6000);
      }
    });
    return false;
  });

});

.result {
  display: none;
  opacity: 0.9;
  position: absolute;
  bottom: 15px;
  left: 15px;
  margin: 0;
  padding: 0;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="result"><span class="dismiss">X</span></div>

Answer 1

因此，如果我正确理解 [x] 在收到ajax响应之前出现，并且您希望它在收到响应时准确显示，那么您必须删除{{1}来自你的ajax调用并移动行

beforeSend

在行

之后的$(".result").fadeIn(200);函数内

success

您的最终脚本将如下所示

$(".result").html(response);

修改

此外，您必须在$(document).ready(function () { $(".dismiss").click(function () { $(".result").fadeOut(500); }); $(document).on('submit', '#code', function () { var data = $(this).serialize(); $.ajax({ type: 'POST', url: 'code_ticket.ini.php', data: data, success: function (response) { $(".result").html(response); $(".result").fadeIn(200); window.setTimeout(function () { $('.result').fadeOut(500); }, 6000); } }); return false; }); }); 容器中添加邮件范围，并将result更改为message result，如下所示。

div

并更改行

<div class="result"> <span class="dismiss">X</span> <span class="message"></span> </div>

到

$(".result").html(response);

你已经完成了