所以我试图动画我的导航链接背景,这是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>
我不知道是什么问题。我尝试过很多其他的方法。我认为这是最接近真正的解决方案,我把我找到的两种类型的代码放在一起。我想知道问题是否可能是我没有将背景位置定义为绝对的,相对的等等(这是可能的吗?)就我所知,对于jquery动画需要定义图像的位置。或者我的代码中可能有任何其他错误。我不知道,请帮帮我。这也是我的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;
}
对于背景图像位置动画,您需要使用"jquery. backgroundposs .js"你可以从这里下载http://keith-wood.name/js/jquery.backgroundpos.js
和下面的代码可以正常工作,像这样
CSSbody{
background-color:#ccc;
}
nav a{
background-image:url(http://img689.imageshack.us/img689/2996/menufc.png);
display:block;
width:120px;
height:22px;
margin-bottom:10px;
}
#m_portf{
background-position:0 -37px;
}
#m_music{
background-position:0 -111px;
}
#m_about{
background-position:0 -185px;
}
#m_contact{
background-position:0 -259px;
}
JQuery $(document).ready(function(){
$('nav a').hover(
function () {
$(this).addClass('active');
$(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-one')+'px'}, 500);
},
function () {
$(this).removeClass('active');
$(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-two')+'px'}, 500);
}
);
});
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>
工作文件Link