JQuery Animating Sprites问题

Question

我明白了。我刚补充说：

    $("#switch").css('background-position','0px 10px')

在.hover（）的第二个函数之前。

---

我正在制作一个使用精灵作为按钮的JQuery导航菜单。我的目标是当你将鼠标悬停在它们上面时，一排油漆管会展开，当你点击它们时会受到挤压。我已经完成了所有设置，除非我遇到问题，当有人按下一个，然后拖动（按钮动画从精灵的右下角到左上角，而不是仅向左移动）。我不确定如何仅使用x轴设置动画效果，并使用0的时间将精灵动画设置为顶部，这会让动画变得混乱。

这是我的javascript。 ids＃home，＃about等是各个按钮，而#NavBar是包含它们的div。

$(document).ready(function() {

    $("#home, #about, #members, #gallery, #press, #campaign, #calendar, #network, #join, #request, #contact").hover(function () {
        $(this)
        .stop(true,false)
        .width(200)
        .animate({"backgroundPosition":"(3px 0px)"},300)
    },
        function () {
        $(this)
        .animate({backgroundPosition:"(-35px 0px)"}, 300)
        .animate({width:"105"}, 300)
    });

    $("#home, #about, #members, #gallery, #press, #campaign, #calendar, #network, #join, #request, #contact").mousedown(function () {
        $(this)
        .animate({backgroundPosition:"(3px -40px)"},0)
    });

    $("#home, #about, #members, #gallery, #press, #campaign, #calendar, #network, #join, #request, #contact").mouseup(function () {
        $(this)
        .animate({backgroundPosition:"(3px 0px)"},0)
    });

    $("#NavBar").mousedown(function () {
        $(this)
        .width(200)
    });

    $("#NavBar").mouseup(function () {
        $(this)
        .width(105)
    });

});

这是我的HTML：

<div id="NavBar">
  <ul>
    <li class="tube" id="home"><a href="_Home.html"></a></li>
    <li class="tube" id="about"><a href="_About.html"></a></li>
    <li class="tube" id="gallery"><a href="_Gallery.html"></a></li>
    <li class="tube" id="campaign"><a href="_Campaign.html"></a></li>
    <li class="tube" id="press"><a href="_Press.html"></a></li>
    <li class="tube" id="calendar"><a href="_Calendar.html"></a></li>
    <li class="tube" id="members"><a href="_Members.html"></a></li>
    <li class="tube" id="network"><a href="_Network.html"></a></li>
    <li class="tube" id="join"><a href="_Join.html"></a></li>
    <li class="tube" id="request"><a href="_Request.html"></a></li>
    <li class="tube" id="contact"><a href="_Contact.html"></a></li>
  </ul>
</div>

这是我的CSS：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

#NavBar {position:absolute; width:105px; cursor:pointer; top:5px;}
#NavBar ul li {list-style: none;}
#NavBar ul li a { display: block; width: 105px; height: 40px;}
#NavBar ul li a:active {background-position: -35px 40px}

#home     {background: url(Tubes/Home.png)     -35px 0px no-repeat;}
#about    {background: url(Tubes/About.png)    -35px 0px no-repeat;}
#members  {background: url(Tubes/Members.png)  -35px 0px no-repeat;}
#gallery  {background: url(Tubes/Gallery.png)  -35px 0px no-repeat;}
#press    {background: url(Tubes/Press.png)    -35px 0px no-repeat;}
#campaign {background: url(Tubes/Campaign.png) -35px 0px no-repeat;}
#calendar {background: url(Tubes/Calendar.png) -35px 0px no-repeat;}
#network  {background: url(Tubes/Network.png)  -35px 0px no-repeat;}
#join     {background: url(Tubes/Join.png)     -35px 0px no-repeat;}
#request  {background: url(Tubes/Request.png)  -35px 0px no-repeat;}
#contact  {background: url(Tubes/Contact.png)  -35px 0px no-repeat;}