数秒後にdivを非表示にします

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

  •  03-07-2019
  •  | 
  •  

質問

jqueryでは、数秒後にdivをどのように非表示にできるのでしょうか？たとえば、Gmailのメッセージのように。

ベストを尽くしましたが、機能させることができません。

役に立ちましたか？

解決

これにより、1秒（1000ミリ秒）後にdivが非表示になります。

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds
#mydiv{
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>

フェードなしで非表示にする場合は、 hide（）を使用します。

他のヒント

.delay（）

を試すことができます 
$(".formSentMsg").delay(3200).fadeOut(300);

divを呼び出して遅延時間をミリ秒単位で設定し、変更するプロパティを設定します。この場合、アニメーション化できるように.fadeOut（）を使用しましたが、.hide（）も使用できます。

http://api.jquery.com/delay/

これを行うには非常に簡単な方法があります。

問題は、.delayがアニメーションのみに影響するため、必要なことは、.hide（）に持続時間を与えることでアニメーションのように動作させることです。

$（＆quot;＃whatever＆quot;）。delay（）。hide（1）;

短い期間を指定すると、通常の.hide関数と同じように瞬時に表示されます。

jqueryは、インターバルタイマーまたは他のイベントハンドラーをセットアップして後でクリアまたはリセットする必要のない、時間を指定してdivを非表示にするさまざまなメソッドを提供します。以下に例を示します。

純粋な非表示、1秒の遅延

// hide in one second
$('#mydiv').delay(1000).hide(0);

純粋な非表示、遅延なし

// hide immediately
$('#mydiv').delay(0).hide(0);

アニメーションの非表示

// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500);

フェードアウト

// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300);

さらに、メソッドはキューの名前または関数を2番目のパラメーターとして使用できます（メソッドによって異なります）。上記のすべての呼び出しと他の関連する呼び出しのドキュメントは、ここにあります。 https://api.jquery.com/category/effects/ 

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

http://james.padolsey.com/javascript/jquery-delay-からplugin /

（メソッドの連鎖を許可）

jQueryタイマーを使用すると、オブジェクトにアタッチされているタイマーに関連付けられた名前を持つこともできます。そのため、複数のタイマーをオブジェクトに接続して、いずれかを停止できます。

$("#myid").oneTime(1000, "mytimer1" function() {
  $("#something").hide();
}).oneTime(2000, "mytimer2" function() {
  $("#somethingelse").show();  
});

$("#myid").stopTime("mytimer2");

eval関数（およびその関連関数であるFunction、setTimeout、setInterval）は、JavaScriptコンパイラへのアクセスを提供します。これは時々必要ですが、ほとんどの場合、それは非常に悪いコーディングの存在を示します。 eval関数は、JavaScriptの最も誤用されている機能です。

http://www.jslint.com/lint.html

おそらく最も簡単な方法は、タイマープラグインを使用することです。 http://plugins.jquery.com/project/timers のようなものを呼び出します p> 

$(this).oneTime(1000, function() {
    $("#something").hide();
  });

直接使用できます

$('#selector').delay(5000).fadeOut('slow');
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top