###前提・実現したいこと
下記のようなソースでロード時に全ての画像をランダムにフェードイン表示したいのですが、
var setElm = $('.load > ul > li');を関数randomのスコープ内で宣言するとランダム表示が延々と続くのですが、関数random外で変数宣言するのと関数random内で宣言するのは何が違うのでしょうか?
また、 Math.floor(Math.random()*setElm.length);を変数宣言しない場合、全ての画像が表示されないのですが、これもどういった理由なのでしょうか。
###該当のソースコード
<!DOCTYPE html> <html xml:lang="ja" lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> var setElm = $('.load > ul > li'); $(window).load(function(){ function random(){ //var setElm = $('.load > ul > li'); //↑ここで変数setElmを宣言するとランダム表示が終わらない。 var elmLength = setElm.length, randomSet = Math.floor(Math.random()*setElm.length); //↑ここで変数宣言をせずにそのまま書いてしまうと全ての画像が表示されない。 $(setElm[randomSet]).css({visibility:'visible',opacity:'0'}).animate({opacity:'1'},1000); setElm.splice(randomSet,1); if(setElm.length > 0) { setTimeout(function(){ random(); },100); } else { return false; } } random(); }); }); </script> </head> <body> <div class="load"> <ul> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> </ul> </div> </body> </html>
###追記
「表示が延々と続くのですが、関数random外で変数宣言するのと関数random内で宣言するのは何が違うのでしょうか?」の補足ですが、
例えば・・・
var randomSet = Math.floor(Math.random()*setElm.length);
$(setElm[randomSet]).css({visibility:'visible',opacity:'0'}).animate({opacity:'1'},1000);
を変数randomSetを使わずに
$(setElm[Math.floor(Math.random()*setElm.length)]).css({visibility:'visible',opacity:'0'}).animate({opacity:'1'},1000);
と書いたときということです。
回答1件
あなたの回答
tips
プレビュー