グローバル変数とローカル変数について

質問

javascript初心者です。

現在、複数の画像をループで順番にふわっと表示してるものを作っています。

/*＝＝＝＝＝＝＝以下ｈｔｍｌ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
<div id="slidearea">
<div id="mask"></div><!--/mask-->
<div id="slide">
<img src="img/01.jpg" class="slide">
<img src="img/02.jpg" class="slide">
<img src="img/03.jpg" class="slide">
</div>
</div><!--/slidearea-->

div#slideに入っているimgを順番に自動で表示させていきたいです。

/*＝＝＝＝＝＝＝以下JS＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
$(function(){
setInterval(
function(){
var img = $("#slide img"),
imglast = $("#slide img:last"),
imgfirst = $("#slide img:first"),
slide = $("#slide");

$(imglast).animate({opacity : "0"},{
duration : 2000,complete:
function(){
$(imglast).clone().prependTo(slide);
$(imgfirst).css({opacity : "1"});
$(imglast).remove();
},
});
},6000);
});
だと動くのですが、

$(function(){
var img = $("#slide img"),
　　　 imglast = $("#slide img:last"),
　imgfirst = $("#slide img:first"),
slide = $("#slide");

setInterval(
function(){
$(imglast).animate({opacity : "0"},{
duration : 2000,complete:
function(){
$(imglast).clone().prependTo(slide);
$(imgfirst).css({opacity : "1"});
$(imglast).remove();
},
});
},6000);
});

変数をsetIntervalから外へ出すと、おかしく表示されてしまします。

これはどのようなことから起きるのでしょうか？

初歩的な質問ですが、よろしくお願いいたします。

回答No.1

fujillin

＞これはどのようなことから起きるのでしょうか？
変数を外に出しても参照はできていますが、値の内容が参照したい値と違うものであることが直接の原因です。

変数を外に出した場合は、imglast、imgfirstなどは常に固定の要素を示すことになります。
一方で、setIntervalで指定している関数では画像の順序を入替えていますので、setInterval内で変数定義を実行した場合は、その都度最新の状態でのimglast、imgfirstが取得されます。このため固定での要素指定とは違った結果となります。
このためアニメーションの対象となる要素が異なってしまうといったことが起きます。

DOM要素の順序を変えるようなことはせずに、参照する場所をindexのような順番値で保存しておくようなロジックにすれば、ご質問のように変数定義を外側に出しても意図通りに動作すると思います。
また、順序を記憶しておかなくても、要素に"active"などのクラス設定をすることで、これを目印にするという方法もよく用いられているようです。

お礼

ものすごくわかりやすい回答ありがとうございます！頭にスーッと入っていきました！
本当にありがとうございます^^