jQuery AJAX: как добавить СОХРАНЕННОЕ сообщение и заставить его исчезнуть через секунду

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

У меня есть ‹div id=form23›‹form›‹textarea›blahblah‹/textarea›‹input type=button value=save onClick=saveCaption(23)›‹/form›‹/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.

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

функция saveCaption (идентификатор) {

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;

}


jquery append fadeout
person Scott Yu - builds stuff    schedule 16.08.2009    source источник
comment
Я сделал это, основываясь на ответе IV и RaYell. Но так ли это элегантно? function saveCaption(id) { var queryString = $('#form'+id).formSerialize(); $.ajax({ тип: POST, url: include/ajax.php?request=saveCaption, данные: queryString, успех: function(response) { $('#form'+id).append('‹div id=message ›'+response+'‹/div›'); setTimeout(function () { $('#message').fadeOut(function(){ $(this).remove(); }); }, 1000); } }); вернуть ложь; }   -  person Scott Yu - builds stuff    schedule 16.08.2009
comment
Я определенно не могу ответить, является ли это самым элегантным способом или нет, так как, вероятно, есть какой-то другой способ сделать это. Рад, что это работает, однако! :) Ваше здоровье.   -  person theIV    schedule 16.08.2009

Ответы (2)


arrow_upward
4
arrow_downward

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

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

arrow_upward
4
arrow_downward

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

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

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

person RaYell    schedule 16.08.2009
comment
Не совсем уверен, что понимаю... мой ответ сохранен. Хммм... не мог бы я написать код в моем коде, чтобы я мог понять? - person Scott Yu - builds stuff; 16.08.2009
comment
@Scott, я думаю, вам лучше потратить некоторое время на то, чтобы понять, что именно вам нужно сделать, поскольку @RaYell дал вам довольно хорошее направление, как вам это нужно сделать. SO - это не то место, где люди будут писать код для вас. - person Artem Barger; 16.08.2009