jQueryでn秒後に要素を最後に移動

質問

$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner2"><img src="01.jpg" width="100%" alt="" /></div>');
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="02.jpg" width="100%" alt="" /></div>');
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="03.jpg" width="100%" alt="" /></div>');
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner1"><img src="04.jpg" width="100%" alt="" /></div>');
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="05.jpg" width="100%" alt="" /></div>');
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="06.jpg" width="100%" alt="" /></div>');

$(".banner").click(function(){
$(this).prependTo("#top_banner");
});

$(".banner1").delay(1000).prependTo("#top_banner");
$(".banner2").delay(2000).prependTo("#top_banner");

<div style="width:750px; background-color:#808080; height:90px; padding-top:6px;">
<div style="width:735px; margin:auto; position:relative;" id="top_banner">
</div>
</div>

上記のように記述し、n秒後に自動でバナーが切り替わるプログラムを作成しようしましたが、
うまく動作しません。
クリックすると切り替わるので、その要領で「delay(1000).prependTo("#top_banner")」と記述しました。
1秒後に画像が切り替わるかなと思いましたが、動作しませんでした。

delayはprependToには効かないのでしょうか。

また、上記ソースをもう少し完結にまとめることは可能でしょうか。

回答No.1

utun01 · ベストアンサー

そもそもprependは「前に追加」なので切り替えの要件には向かないと思いますよ。
普通にhtmlとかで中身を入れ替える方がいい気がします。
あと、このソースだけだと全体が分かりませんが、
$(document).ready(function(){
});
みたいなものは使っていますか？
このソースがそのまま使われている場合、Javascriptが"top_banner"が存在しないうち動いてしまうので、
予約された命令内のインスタンスでも"top_banner"が存在しない事になっている気がします。