jQuery的帮助与CSS（）和动画（）

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的李得到一个活动类，并根据该活动的背景图像上移动，以显示该网页是积极的，但是这只有当我使用的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'}) 
} 

再没什么g发生并且我的background-position是0px 0px为什么？

Answer 1

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

http://plugins.jquery.com/project/backgroundPosition-Effect

Answer 2

对于这些线的改变backgroundPosition到'background-position'，例如：

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