jQuery AJAX：如何附加“SAVED”消息并使其在一秒钟后消失

对于jQuery专家来说,这可能非常简单.

我有< div id =“form23”>< form>< textarea> blahblah< / textarea>< input type =“button”value =“save”onClick =“saveCaption(23)”>< /形式>< / DIV> 我希望SAVED消息出现并消失.但我不想让表格或其元素消失. 我有一个AJAX调用,如下所示.

function saveCaption(id) {

var queryString = $('#form'+id).formSerialize(); 

  $.ajax({

    type: "POST",

    url: "includes/ajax.php?request=saveCaption",

    data: queryString,

    success: function(response) {

      $('#form'+id).append(response)

    }

  });

  return false;

}

我想知道..我可以附上回复.但有一种方法可以在一秒钟之后立即淡出它.现在,它只是不断重复并添加到最后一个追加.我希望它在使用fadeOut后立即显示和消失.

更新：我是基于theIV和RaYell的回应做到的.它有效..但它优雅吗？

function saveCaption(id){

var queryString = $('#form'+id).formSerialize(); 

  $.ajax({

    type: "POST",

    url: "includes/ajax.php?request=saveCaption",

    data: queryString,

    success: function(response) {

        $('#form'+id).append('<div id="message">'+response+'</div>');

        setTimeout(function () {

          $('#message').fadeOut(function(){

            $(this).remove();

          });

        }, 1000);

    }

  });

  return false;

}

我想你会想要结合RaYell上面的回答但是在fadeOut回调中使用remove,否则它会继续附加到之前的追加 – 至少,我认为它会根据你的措辞做到这一点你的问题.像这样的东西可以工作：

setTimeout(function () {
  $('selector').fadeOut(function(){
    $(this).remove();
  });
}, 1000);