[気分jquery]マウスオーバーで背景画像を滑らかに変える[jquery] mouse over change background image

サンプル：こんな感じで滑らかにマウスオーバーします。

jQuery: The Write Less, Do More, JavaScript Libraryよりjquery-1.3.2.min.jsをダウンロードする
下記ソースをheadタグに書く。
[source language="html"]
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#info_btn li a").css("opacity","0");
//初期設定として画像のopacityを0にします。
$("#info_btn li a").hover( //hoverです。
function () {
$(this).stop().animate({opacity: 1}, 'slow');},
//マウスオーバー時にopacityを1にします。
function () {
$(this).stop().animate({opacity: 0}, 'slow');}
//マウスアウト時にopacityを0に戻します。
);
});
});
</script>
[/source]
css には下記を記述
[source language="html"]
#info_btn li{
list-style-type:none;
width:189px;
height:35px;
}

#info_btn {height:35px;margin:0;padding:0;}
#info_btn li a { display:block;height:35px;width:189px;text-indent:-9999px;}
#info_btn li#nav1 {background:url(../img/news_btn_off.jpg) no-repeat;}
#info_btn li#nav1 a {background:url(../img/news_btn_on.jpg) 0px -35px;}
[/source]