jQueryスライドショーはループしません

Question

私は以前同様の質問がありましたが、私はjQueryと非常に新人です。私は非常にシンプルなスライドショーを作成しましたが、最後のスライドが表示されても、最初にループしません。単に消えます。どうすればそれを連続的にループさせることができますか？

$(document).ready(function(){ 
    $(".featured > div:gt(0)").hide(); 

    setInterval(function() { 
    $('.featured > div:first') 
    .fadeOut(2000) 
    .next() 
    .fadeIn(2000) 
    .end() 
    .replaceWith(); 
    }, 4000); 

}); 

Answer 1

replaceWith()は完全にあなたが戻ってループには何もありませんので、DOM要素は、それを呼び出しているものは何でも削除されます。

代わりに.appendTo('.featured')を試してみてください。これにより、最初の要素が最後まで移動し、無限ループを続けることができます。

setInterval(function() { 
    $('.featured > div:first') 
     .fadeOut(2000) 
     .next().fadeIn(2000).end() 
     .appendTo('.featured'); 
}, 4000); 

http://jsfiddle.net/JWc32/1/

UPDATE：

ページレイアウトに応じて、あなたの代わりにコールバックでappendTo()を行うことをお勧めしますので、​​が完了するまで、それは移動しません。

setInterval(function() { 
    $('.featured > div:first').fadeOut(2000, function() { 
     $(this).appendTo('.featured'); 
    }).next().fadeIn(2000); 
}, 4000); 

http://jsfiddle.net/JWc32/3/