jQuery AJAX: Как добавить сообщение «SAVED» и заставить его исчезнуть после второго

Question

, это, вероятно, очень просто для эксперта jQuery.

У меня < DIV ID = " form23 " > < форма > <TextArea> blahblah </TextArea > < тип входного = " кнопку " значение = " сохранить " OnClick = " saveCaption (23) " > </форма > </div >

Я хочу сообщение SAVED a ppear и исчезают. Но я НЕ хочу, чтобы форма или ее элементы исчезли.

У меня есть вызов 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.

ОБНОВЛЕНИЕ: Я сделал это на основе ответаIV и RaYell. Это работает ... но элегантно ли это?

функция 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; 

}

Answer 1

Я думаю, вы захотите сделать комбинацию ответа RaYell выше, но используйте удаление в обратном вызове fadeOut, иначе он будет продолжать добавляться к предыдущему добавлению - по крайней мере, я думаю, что он будет делать это на основе как вы сформулировали свой вопрос. Что-то вроде этого могло бы работать:

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

Answer 2

После добавления Ваше сообщение добавить это (в успех обратного вызова):

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

Заменить переключатель с чем-то, что будет на самом деле соответствуют вашему сообщению.