CSSスプライトをフェードアニメーションさせるJQueryプラグイン「hoverfade」の使い方

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.hoverfade-1.0.2.js"></script>

<script type="text/javascript">
$(function(){
        $("#nav").hoverFade();
    });
</script>

<ul id="nav" class="hover-anims">
    <li class="home"><a href="#">home</a></li>
    <li class="about"><a href="#">about</a></li>
    <li class="contact"><a href="#">contact</a></li>
</ul>

ul#nav, #nav li{
    list-style:none;
    margin:0;
    padding:0;
}

#nav li {
    display:block;
    overflow:hidden;
    float:left;
    list-style-type:none;
    float:left;
    text-indent:-9999px;/*li内のアンカーテキストを不可視化*/
}

#nav.hover-css a,
#nav.hover-anims a,
#nav.hover-anims span {
    display:block;
    position:relative;
    background-image: url(./images/sprite.png); /*CSSスプライト画像呼び出し*/
    background-repeat: no-repeat;
}

#nav.hover-anims span { 
    position:absolute;
    left:0;
    top:0;
}

#nav.hover-css .home a,
#nav.hover-anims .home a,
#nav.hover-anims .home span {
    width:72px;/*呼び出すボタンの幅*/
    height:15px;/*呼び出すボタンの高さ*/
    background-position:-514px -270px;　/*マウスアウト時のスプライト画像の位置指定*/
}

#nav.hover-css .home a:hover,
#nav.hover-anims .home span {
    background-position:-432px -270px;　/*マウスオーバー時のスプライト画像の位置指定*/
}

#nav.hover-css .about a,
#nav.hover-anims .about a,
#nav.hover-anims .about span {
    width:87px;
    height:15px;
    background-position:-10px -296px;
}

#nav.hover-css .about a:hover,
#nav.hover-anims .about span {
    width:87px;
    height:15px;
    background-position:-335px -270px;
}

#nav.hover-css .contact a,
#nav.hover-anims .contact a,
#nav.hover-anims .contact span {
    width:90px;
    height:17px;
    background-position:-235px -270px;
}

#nav.hover-css .contact a:hover,
#nav.hover-anims .contact span {
    width:90px;
    height:17px;
    background-position:-10px -270px;
}

<ul id="nav" class="hover-anims">
    <li class="home"><a href="#"><img src="./images/sp.gif" alt="ホーム" width="72" height="15" /></a></li>
    <li class="about"><a href="#"><img src="./images/sp.gif" alt="アバウト" width="87" height="15" /></a></li>
    <li class="contact"><a href="#"><img src="./images/sp.gif" alt="コンタクト" width="90" height="17" /></a></li>
</ul>

ul#nav, #nav li{
    list-style:none;
    margin:0;
    padding:0;
}

#nav li {
    display:block;
    overflow:hidden;
    float:left;
    list-style-type:none;
    float:left;
}

#nav.hover-css a,
#nav.hover-anims a,
#nav.hover-anims span {
    display:block;
    position:relative;
    background-image: url(./images/sprite.png); /*CSSスプライト画像呼び出し*/
    background-repeat: no-repeat;
}
#nav.hover-anims span {
    position:absolute;
    left:0;
    top:0;
}

#nav.hover-css .home a,
#nav.hover-anims .home a,
#nav.hover-anims .home span {
    width:72px;
    height:15px;
    background-position:-514px -270px;　/*マウスアウト時のスプライト画像の位置指定*/
    margin-top: 2px; /*画像によって高さが違うため調整*/
    margin-left: 81px;　/*メニューボタンの距離幅*/
}

#nav.hover-css .home a:hover,
#nav.hover-anims .home span {
    background-position:-432px -270px;　/*マウスオーバー時のスプライト画像の位置指定*/
    margin: 0; /*↑のマージンを引き継いでしまわないように*/
}

#nav.hover-css .about a,
#nav.hover-anims .about a,
#nav.hover-anims .about span {
    width:87px;
    height:15px;
    background-position:-10px -296px;
    margin-left: 64px;
    margin-top: 3px;
}

#nav.hover-css .about a:hover,
#nav.hover-anims .about span {
    width:87px;
    height:15px;
    background-position:-335px -270px;
    margin: 0;
}

#nav.hover-css .contact a,
#nav.hover-anims .contact a,
#nav.hover-anims .contact span {
    width:90px;
    height:17px;
    background-position:-235px -270px;
    margin-left: 58px;
    margin-top: 1px;
}

#nav.hover-css .contact a:hover,
#nav.hover-anims .contact span {
    width:90px;
    height:17px;
    background-position:-10px -270px;
    margin: 0;
}