[解決済み] jQueryで関数呼び出しを繰り返す方法
2022-02-07 17:29:50
質問
次のようなコードがあります。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function loop(){
$('#picOne').fadeIn(0).fadeOut(8000);
$('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
$('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
$('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
}
loop();
});
</script>
しかし、最後の写真がフェードアウトするとき、コードは繰り返されません。何が問題なのでしょうか?
解決方法は?
各要素のアニメーションの時間を同じにしたい場合を想定しています。
var $elements = $('#picOne, #picTwo, #picTree, #picFour');
function anim_loop(index) {
// Get the element with that index and do the animation
$elements.eq(index).fadeIn(1000).delay(3000).fadeOut(1000, function() {
// Kind of recursive call, increasing the index and keeping in the
// the range of valid indexes
anim_loop((index + 1) % $elements.length);
});
}
anim_loop(0); // start with the first element
アニメーションがどうあるべきか、正確にはわかりませんが、コンセプトはご理解いただけたかと思います。
更新しました。
一定時間後に画像のフェードアウトとインを同時に行いたい場合は
setTimeout
を呼び出し
fadeOut
と
anim_loop
をコールバックに追加します。
$elements.eq(index).fadeIn(1000, function() {
var $self = $(this);
setTimeout(function() {
$self.fadeOut(1000);
anim_loop((index + 1) % $elements.length);
}, 3000);
});
関連
-
[解決済み] Contact Form 7 のフォームで AJAX を有効にする(AJAX ロード後)。
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Bootstrap - Uncaught TypeError: 未定義のプロパティ 'fn' を読み取れない。
-
[解決済み】jQueryでクリックされた要素のIDを取得する方法
-
[解決済み] Foundation Revealモーダルjavascriptを開く方法
-
[解決済み] カルーセルで画像を中央に配置する方法
-
[解決済み] jQueryがfadeOutで動作しない
-
[解決済み] どのようにjQueryでJSON配列をループするのですか?
-
[解決済み] jQueryやJavaScriptを使用してURLパラメータを取得するには?
-
[解決済み] jQuery - クラスの代わりにIDを追加する
-
[解決済み] jquery form が期待通りに動作しない。ajaxForm が関数でない。
-
[解決済み] jQuery Mobileのボタンを無効にする