Question

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

我正在尝试使用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})
        })
});

非常感谢任何评论。

Answer 1

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

Answer 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州

Answer 3

您必须替换选择器：

$(this).stop().animate(

使用：

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

因为使用stop（）选择标记，您需要选择li标记。

Answer 4

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

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

4 个答案: