- ベストアンサー
jQueryでの画像のフェードインのループ
- jQueryを使用して、３枚の背景画像がフェードインで切り替わり、ループする方法を教えてください。
- 上記のコードでは、１週目は正常に動作しますが、２週目で２枚目の画像で止まってしまいます。なぜ２週目で止まるのか？原因と修正方法を教えてください。
- スマートな書き方を教えてください。
- stylemiya
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞１週ループまでは上手くいくのですが、２週目に２枚目の画像で止まってしまいます。 何をもって1週と表現しているのかわかりませんが、想像では、ご提示のコードの1順の途中で止まるか、何順もしているかのどちらかでは？ 構文が setInterval( fucntion() { hoge(); }, 0); となっていますが、これってウイルスみたいなものになりかねない。 while(true){ hoge(); } とほとんど同じなので、同時に多数のアニメーションが実行されることになります。 ただし、setIntervalでインターバルを0にするのってナンセンスなので、ブラウザによって実装が違うようです。 簡単に試してみたら、fxでは上述の通り、多数のアニメーションが並行する状態になります。理論上は無限大ですが、物理的にはブラウザの実行速度に制約されることになるかと思います。 IE6では、0だと1回だけ実行するという実装のようです。数値を1にすると、無数に発生するようになります。 また、関数内の clearQueue(); でエラーを起こします。 IEでは関数内のエラーでスクリプト全体の実行が停止されるようですが、fxでは関数の続行はキャンセルされるもののスクリプトは停止しないので、setIntervalで他の関数が実行され続け、エラーの山を作っていくようです。 （ちょっとテスト実行してみただけの観察なので、実際は違うかもしれません） ご質問の事象から想像すると、fx系でテストなさっているのではと思いますが、同じ要素に対して表示と非表示のアニメーションが同時に相当数動作している状態になってしまうと推測されますので、その結果、見えない（非表示の）状態が連続しているだけと想像されます。 現状で動作するようにするなら、clearQueueを削除し、インターバルを10000などとすれば同じシークエンスを繰り返すように動くかと思います。 ＞スマートな書き方をご教授頂けませんか 基本的には1シークエンス分を定義しておいて、それを繰り返すような処理になるかと思います。 ご提示のような方法とするか、1シークエンスが複雑で長くなったり、要素の操作がラップするような場合は、1処理単位の記述を1要素を1回アニメーションするものにしておいて、処理内容を別に配列などで定義しておくといった方法も考えられます。この場合は、配列全体で1シークエンス分を定義するといった感じになるかと思います。 例えば、ご質問の例だと fadein_2, fadeIn, 1000, 4000 fadein_3, fadeIn, 1000, 0 fadein_2, hide, 0, 0 fadein_3, fadeOut, 1000, 1000 みたいなイメージでしょうか。
お礼
丁寧な回答ありがとうございました。 おかげさまで何とか目的を達成する事ができました。