jquery帮助css()和animate()

时间:2011-05-16 20:26:44

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

我有这个导航系统,

<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-position0px 0px为什么?

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

对于这些行中的每一行,将backgroundPosition更改为'background-position',例如:

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