[解決済み] タイムアウト jQueryエフェクト
2023-01-15 16:07:50
質問
ある要素をフェードインさせ、5000msで再びフェードアウトさせたいと思っています。私はこのようなことを行うことができることを知っています。
setTimeout(function () { $(".notice").fadeOut(); }, 5000);
しかし、これではフェードアウトの制御しかできないので、コールバックで上記を追加することになるのでしょうか?
どのように解決するのですか?
更新しました。
jQuery 1.4 からは
.delay( n )
メソッドを使用することができます。
http://api.jquery.com/delay/
$('.notice').fadeIn().delay(2000).fadeOut('slow');
注意
:
$.show()
と
$.hide()
はデフォルトではキューに入れません。
$.delay()
を使いたい場合は、そのように設定する必要があります。
$('.notice')
.show({duration: 0, queue: true})
.delay(2000)
.hide({duration: 0, queue: true});
Queue構文が使える可能性があります。
jQuery(function($){
var e = $('.notice');
e.fadeIn();
e.queue(function(){
setTimeout(function(){
e.dequeue();
}, 2000 );
});
e.fadeOut('fast');
});
または、本当に独創的で、それを行うためにjQuery関数を作成することができます。
(function($){
jQuery.fn.idle = function(time)
{
var o = $(this);
o.queue(function()
{
setTimeout(function()
{
o.dequeue();
}, time);
});
};
})(jQuery);
というのは、(理論的には、ここで記憶をたどってみると)このようにすることができるのです。
$('.notice').fadeIn().idle(2000).fadeOut('slow');
関連
-
[解決済み] JavaScript - 二重引用符のエスケープ
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] GoogleのホストされたjQueryを使用する最良の方法、しかしGoogleの私のホストされたライブラリにフォールバックすることは失敗します。
-
[解決済み] jQueryでドロップダウンリストの選択値を変更する
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryでdata属性で要素を選択する
-
[解決済み] jQueryでチェックボックスの値を取得する
-
[解決済み] jQuery UI DatePicker - 日付フォーマットの変更
-
[解決済み] jQueryでtextareaの値を設定する
-
[解決済み] 既存の非順序型リストにリストアイテムを追加する方法
-
[解決済み] 動的に生成された要素でクリックイベントが動作しない [duplicate]
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み] jQueryの.ajax()メソッドが私のセッションクッキーを送信しないのはなぜですか?
-
[解決済み】jQueryのテンプレートエンジン【終了しました
-
[解決済み] AJAXリクエストを定期的に発生させるには?