このjQueryの意味を説明してください。

質問

jQuery の初心者です。
あるサイトからjQueryでクロスフェードさせる内容のものを
参考にしているのですが、セレクタなどの個々の意味が
いまひとつ理解出来ません。

調べて自分なりの解釈を書きましたが、訂正などがありましたら
ご説明頂ければと思います。

■html

<div class="box">
<img src="1.png" width="600" height="200" alt="" />
<img src="2.png" width="600" height="200" alt="" />
<img src="3.png" width="600" height="200" alt="" />
</div>

■css

.box{
position:relative;
height:300px;
width:400px;
}

.box img{
position:absolute;
left:0;
top:0;
}

■js

$(function(){

$('.box img:gt(0)').hide(); //0より大きい数字のimgをhideする

setInterval(function(){

$('.box :first-child') //.box内の一番目
.fadeOut(1500) //1.5秒かけてフェードアウト
.next('img') //次のimgを
.fadeIn() //フェードイン
.end() //終わったら？？
.appendTo('.box'); //.boxに追加？？

},4000); //4秒間隔で繰り返す

});

回答No.1

CyberCypher

//(第一要素(タイマー発動後実行する関数), タイマー間隔)
setInterval(function(){
$('.box :first-child') //.box内の一番目
.fadeOut(1500) //1.5秒かけてフェードアウト
.next('img') //次のimg要素を指定
.fadeIn() //デフォルト(normal)の速度でフェードイン
.end() //選択状態を破棄して一つ前の選択状態を呼び出し(next('img')を選択していたが、前のbox一番目を参照しなおす)
.appendTo('.box'); //現在の要素をboxの一番最後に(正確には選択した要素を指定した要素に入れる)
},4000); //4秒間隔で繰り返す