为什么这个 jquery 不能正常工作？答案

【问题标题】：why isnt this jquery working properly?为什么这个 jquery 不能正常工作？
【发布时间】：2009-10-09 21:53:00
【问题描述】：

在本网站的导航中：[链接已删除]

我正在尝试使用 Jonathan Snook 的 jQuery 背景图像动画http://snook.ca/archives/javascript/jquery-bg-image-animations/

使用的代码：

HTML

<div class="navigation">
            <ul class="navigation">
                <li class="about-us"><a href="#">about us</a></li>                                                              
                <li class="services"><a href="#">services</a></li>
                <li class="products"><a href="#">products</a></li>
                <li class="news"><a href="#">news</a></li>
                <li class="contact"><a href="#">contact</a></li>
            </ul>
        </div><!--/navigation-->

CSS：

div.navigation {
    display: block;
    height: 47px;
}

ul.navigation li { 
    float: left; 
    display: block;
    text-indent: -9999px;
    background: url(../i/menu-sprite.jpg) no-repeat;
}

ul.navigation li a { display: block; height: 47px;}

ul.navigation li.about-us { width: 197px; background-position: 0 0; }
ul.navigation li.about-us:hover { width: 197px; background-position: 0 -47px; }

ul.navigation li.services { width: 200px; background-position: -197px 0; }
ul.navigation li.services:hover { width: 200px; background-position: -197px -47px; }

ul.navigation li.products { width: 210px; background-position: -396px 0; }
ul.navigation li.products:hover { width: 210px; background-position: -396px -47px; }

ul.navigation li.news { width: 152px; background-position: -606px 0; }
ul.navigation li.news:hover { width: 152px; background-position: -606px -47px; }

ul.navigation li.contact { width: 183px; background-position: -758px 0; }
ul.navigation li.contact:hover { width: 183px; background-position: -758px -47px; }

jQuery:

$(function(){
$('ul.navigation li a')
    .css( {backgroundPosition: "0 0"} )
    .mouseover(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 -47px)"}, 
            {duration:500})
        })
    .mouseout(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 0)"}, 
            {duration:500})
        })
});

任何 cmets 将不胜感激。

【问题讨论】：

你不能认真地指望我们说为什么'this jquery'不起作用没有向我们展示你做了什么？
抱歉，今天过得不好 :)
它使用 jQuery 插件。你包括了吗？
是的。
注意：我编辑了答案并取出了代码，因为这可能不是您想要的。它取代了您所有指向“关于我们”的链接。您可能需要为不同的链接应用不同的 x 位置，而不是一次性完成。

标签： jquery html css

【解决方案1】：

我没有看到应用于您的ul.navigation li a 的背景图像。然而，您正在尝试设置背景位置样式并为其设置动画。

【讨论】：

【解决方案2】：

我不知道什么不起作用，但我假设你的 jquery 没有为 background position 设置动画，这是因为你已经在你的 CSS 中给出了一个 hover 状态，它会覆盖动画并立即移动你的背景位置...
您的 javascript 中的另一件事尝试使用，因为您有 background position 用于 .about-us 而不是 .about-us a

$('ul.navigation li.about-us').stop().animate(
                {backgroundPosition:"(0 -47px)"}, 
                {duration:500})

但在您的 jquery 代码中，您再次重置悬停时的背景位置 '0 0'... 所以我建议您删除 css:hover 状态

【讨论】：

【解决方案3】：

你必须替换选择器：

$(this).stop().animate(

与：

$(this).parent('li').animate(

因为使用 stop() 你选择了一个标签，你需要选择 li 标签。

【讨论】：

【解决方案4】：

jquery 中的背景动画经常被忽略的一件事是它们需要一个额外的插件（虽然它是一个小插件）才能使其工作。该插件可以在http://plugins.jquery.com/project/backgroundPosition-Effect找到。

【讨论】：