1

所以我试图为我的导航链接背景设置动画，它是 Css sprite。这张图片：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 动画需要定义 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;
}
4

1 回答 1

0

对于背景图像位置动画，您需要使用“jquery.backgroundpos.js”您可以从这里下载它http://keith-wood.name/js/jquery.backgroundpos.js

下面的代码像这样工作正常

CSS

body{
    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>

这是工作文件链接

于 2013-03-02T12:49:05.810 回答