js、 jQuery の手直しを助けてください
js, jQuery 初心者です。下記のコードの手直しを助けて下さい
このコードはページ内の複数設置されたリンクのいずれかをクリックすると
背景の画像がフェードしながら変わるというものです。
例えばリンク１を押すと背景画像１がフェードしながら呼び込まれ、
リンク２を押すと背景画像２が呼び込まれるといった感じです。
このソースコードを使うに当たって問題が２つあり、
初心者の自分では手直しできないため
こちらに質問させていただきました。
問題１，Firefox 4 では作動するのに、他のブラウザではうごかない。
テスト済みブラウザ→ Chrome v.11.0, IE8, Safari 5
問題２、次画像のフェードインが、前画像のアウトの後にならないと読み込みが始まらない。
これだとフェード時に画像が一時期消える（真っ白になってしまう）時間ができてしまうので
出来れば次の画像をフェードなしでストレートに読込み、その上で前の画像をフェードアウトさせたいです。
どなたか問題解決の手直し方法をわかる方がいらっしゃいましたら
ぜひ教えてください
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.5.0");</script>
<style type="text/css">
#wrapper {
width: 100%;
height:100%;
background-image:url(img/img1.jpg);
background-repeat:repeat;}
#container{
width:1000px;
height:1000px;}
</style>
<script type="text/javascript">
$(function(){
$("#nav a").click(function(){
var val = this.rel, layer = $("#wrapper");
layer.fadeOut(500, function(){
layer.css("backgroundImage", "url(img/"+val+".jpg)").fadeIn(500);
});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="nav">
<a href="#" id="btn1" rel="img1">background1</a>
<a href="#" id="btn2" rel="img2">background2</a>
<a href="#" id="btn3" rel="img3">background3</a>
</div>
</div>
</div>
</body>
</html>
[/code]
お礼
そいうことなんですね！ありがとうございます。基礎をしっかり勉強していきたいと思います。。