CODEWITHSUNDEEP
javascriptjquerydomjquery-animatedom-events
Udders
Udders

Reputation: 259

jquery help with css() and animate()

I have this nav system,

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

based on the uri the li gets an active class, and based on that active a background image moves to show which page is active, however this only works when I use the CSS function jquery link so, 

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 I use, 

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'})
}

then nothing happens and my background-position is 0px 0px why?

Upvotes: 2

Views: 264

Answers (2)

Naftali
Naftali

Reputation: 146302

For each of these lines change backgroundPosition to 'background-position', for example:

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

Upvotes: 1

Neil
Neil

Reputation: 1206

background-position isn't built into jQuery's core animate functionality. You can add it with background-position plugin:

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

Upvotes: 2

Related Questions