javascript - 数秒後にdivを非表示にする

Question

疑問に思っていたのですが、jqueryで数秒後にdivを非表示にするにはどうすればよいですか？たとえばGmailのメッセージのように。

私は最善を尽くしましたが、それを機能させることができません。

score 271 · Accepted Answer

これにより、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()。

score 93 · Accepted Answer

あなたは試すことができます.delay()

$(".formSentMsg").delay(3200).fadeOut(300);

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

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

score 13 · Accepted Answer

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/にあります。

score 11 · Accepted Answer

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

問題は、.delayはアニメーションにのみ影響するため、.hide（）に期間を指定して、アニメーションのように動作させる必要があることです。

$("#whatever").delay().hide(1);

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

score 6 · Accepted Answer

$.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/から

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

<script>
    $(function() {
        $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>

score 0 · Accepted Answer

0

直接使用できます

$('#selector').delay(5000).fadeOut('slow');

于 2019-02-16T09:38:26.667 に答える

javascript - 数秒後にdivを非表示にする

9 に答える 9

Related

Reference