jquery 帮助 css() 和 animate()

Question

我有这个导航系统，

<nav id="mainnav">
    <ul>
        <li<?php if ( $this->uri->segment(1) == '' ): ?> class="active" <?php endif; ?>><a href="">Jobwall</a></li>
        <li<?php if ( $this->uri->segment(1) == 'jobfeed' ): ?> class="active" <?php endif; ?>><a href="">Live Job Feed</a></li>
        <li<?php if ( $this->uri->segment(1) == 'tutorials' ): ?> class="active" <?php endif; ?>><a href="">Tutorials</a></li>
        <li<?php if ( $this->uri->segment(1) == 'services' ): ?> class="active" <?php endif; ?>><a href="">Employer Services</a></li>
    </ul>
    <section id="progress"></section>
</nav>

基于 uri，li 获得一个活动类，并根据该活动，背景图像移动以显示哪个页面处于活动状态，但这仅在我使用 CSS 函数 jquery 链接时才有效，所以，

if($("#mainnav li:eq(0)").hasClass('active'))
{
    $("#progress").css({backgroundPosition: '-883px 0px'})
} 

if($("#mainnav li:eq(1)").hasClass('active'))
{
    alert("hello");
    $("#progress").css({backgroundPosition: '-783px 0px'})
}

if($("#mainnav li:eq(2)").hasClass('active'))
{
    $("#progress").css({backgroundPosition: '-702px 0px'})
}

if($("#mainnav li:eq(3)").hasClass('active'))
{
    $("#progress").css({backgroundPosition: '-567px 0px'})
}

如果我使用，

if($("#mainnav li:eq(0)").hasClass('active'))
{
    $("#progress").animate({backgroundPosition: '-883px 0px'})
} 

if($("#mainnav li:eq(1)").hasClass('active'))
{
    alert("hello");
    $("#progress").animate({backgroundPosition: '-783px 0px'})
}

if($("#mainnav li:eq(2)").hasClass('active'))
{
    $("#progress").animate({backgroundPosition: '-702px 0px'})
}

if($("#mainnav li:eq(3)").hasClass('active'))
{
    $("#progress").animate({backgroundPosition: '-567px 0px'})
}

然后什么也没有发生，我的 background-position 是 0px 0px 为什么？

Answer 1

背景位置没有内置到 jQuery 的核心动画功能中。您可以使用背景位置插件添加它：

http://plugins.jquery.com/project/backgroundPosition -效果

Answer 2

对于每一行，将 backgroundPosition 更改为 'background-position'，例如：

$("#progress").css({'background-position': '-883px 0px'});