jquery 对 css() 和 animate() 的帮助答案

【问题标题】：jquery help with css() and animate()jquery 对 css() 和 animate() 的帮助
【发布时间】：2011-05-16 20:26:44
【问题描述】：

我有这个导航系统，

<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 为什么？

【问题讨论】：

标签： javascript jquery dom jquery-animate dom-events

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：