だから、Cssスプライトであるナビゲーションリンクの背景をアニメーション化しようとしています。この写真: http://img689.imageshack.us/img689/2996/menufc.png
$(document).ready(function(){
$('nav a')
// On mouse over, move the background on hover
.mouseover(function(){
$(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-one')+'px';}, 500);
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-two')+'px';}, 500);
})
});
これは、仕事をするべきjQueryです。また、ここにHTMLがあります:
<header id="menu">
<h1>dawe's portfolio</h1>
<nav>
<a id="m_portf" data-one="0" data-two="-37" href="#portfolio">portfolio</a>
<a id="m_music" data-one="-72" data-two="-111" href="#music">music</a>
<a id="m_about" data-one="-148" data-two="-185" href="#about">about</a>
<a id="m_contact" data-one="-222" data-two="-259" href="#contact">contact</a>
</nav>
</header>
何が問題なのかわからない。私は他の多くの方法でそれをやろうとしました。これが実際の解決策に最も近いと思います。見つけた 2 種類のコードをまとめました。背景の位置を絶対、相対などとして定義していないことが問題なのかどうか疑問に思っていました (それは可能ですか?) jquery アニメーションに関する限り、iamge の位置の定義が必要です。または、私のコードに他のエラーがある可能性があります。わかりません助けてください。これも私のcssです:
#m_portf{
background: #fff url('menu.png')repeat-X 0px -37px;
}
#m_music{
background: #fff url('menu.png')repeat-X 0px -111px;
}
#m_about{
background: #fff url('menu.png')repeat-X 0px -185px;
}
#m_contact{
background: #fff url('menu.png')repeat-X 0px -259px;
}