jQuery AJAX:「SAVED」メッセージを追加し、1秒後に消えるようにする方法

StackOverflow https://stackoverflow.com/questions/1283557

  •  16-09-2019
  •  | 
  •  

質問

これはおそらく jQuery の専門家にとって非常に簡単です。

<div id="form23"><form><textarea>何とか</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;

}

私は疑問に思っていました..応答を追加できます。しかし、1秒後にすぐにフェードアウトする方法はありますか。現時点では、最後の追加に繰り返して追加しているだけです。フェードアウトを使用した直後に表示され、すぐに消えるようにしたいと思います。

アップデート：theIV と 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;

}

役に立ちましたか？

解決

上記のRaYellの回答を組み合わせて実行したいと思いますが、fadeOutコールバックで削除を使用するか、前の追加に引き続き追加します。少なくとも、あなたの表現方法に基づいてそれが行われると思いますあなたの質問。次のようなものが機能する可能性があります。

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

他のヒント

メッセージを追加した後、これを (成功コールバック内に) 追加します。

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

セレクターを実際にメッセージに一致するものに置き換えます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top