Справка jquery с css () и animate () - PullRequest
Новая
       361

Справка jquery с css () и animate ()

2 голосов
/ 17 мая 2011

У меня есть эта навигационная система, 

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

в зависимости от того, получает ли активный класс, и на основании этого активного фоновое изображение перемещается, чтобы показать, какая страница активна, однако это работает только тогда, когдаЯ использую функцию jquery для CSS, поэтому 

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 почему?

Ответы [ 2 ]

2 голосов
/ 17 мая 2011

background-position не встроена в основные функции анимации jQuery. Вы можете добавить его с помощью плагина background-position:

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

1 голос
/ 17 мая 2011

Для каждой из этих строк измените backgroundPosition на 'background-position', например: 

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