jQueryは5秒間表示してから非表示にする


145

.showフォームの送信が成功した後、非表示のメッセージを表示するために使用しています。

メッセージを5秒間表示してから非表示にする方法は?

回答:


351

次のよう.delay()に、アニメーションの前に使用できます。

$("#myElem").show().delay(5000).fadeOut();

アニメーションでない場合はsetTimeout()、次のように直接使用します。

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

2番目を実行するのは、.hide()通常fx、継続時間なしではアニメーション()キューにないため、これは単なる効果です。

または、別のオプションは使用することです.delay()し、.queue()このように、自分自身:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});

1
提案2は、チェックマークアイコンを表示し、hide()の代わりにfadeOut()を使用することで完全に機能しました。すばらしい答えです。
Kevin Zych 2013

2
あなたは、することはできませんいいえ@wilsjd .delay()では動作しません.hide()要素が隠され、その後すぐに表示されます。このjsFiddleをご覧ください。ニックが「アニメーションでない場合は、次のようにsetTimeout()を直接使用してください:...」と述べた理由
Wesley Smith

うーん、それは2年前に機能していたのだろうか。いい発見だ。正直に言ってくれてありがとう。
wilsjd 2015年

私もこれを実装しましたが、5秒以内にメッセージを2回表示すると、前の部分を非表示にして再表示しますが、最初の遅延をリセットしません
alamnaryab

18

以下のエフェクトを使用してアニメーション化でき、要件に応じて値を変更できます

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow'); 

1
$(...)。fadeIn(...)。animate(...)。effectはJQuery 2.1.3の関数ではありません
ダスティンチャールズ

@DustinCharles jQueryだけでなく、jQueryUIを追加します。jQueryには、effect()関数が含まれていません。例:code.jquery.com/ui/1.12.0/jquery-ui.min.js
Rahul

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.