почему этот jquery не работает должным образом?

Question

В навигации этого сайта: [ссылка удалена]

Я пытаюсь использовать анимацию фонового изображения jQuery Джонатана Снука http://snook.ca/archives/javascript/jquery-bg-image-animations/

Используемый код:

HTML

<div class="navigation">
            <ul class="navigation">
                <li class="about-us"><a href="#">about us</a></li>                                                              
                <li class="services"><a href="#">services</a></li>
                <li class="products"><a href="#">products</a></li>
                <li class="news"><a href="#">news</a></li>
                <li class="contact"><a href="#">contact</a></li>
            </ul>
        </div><!--/navigation-->

CSS:

div.navigation {
    display: block;
    height: 47px;
}

ul.navigation li { 
    float: left; 
    display: block;
    text-indent: -9999px;
    background: url(../i/menu-sprite.jpg) no-repeat;
}

ul.navigation li a { display: block; height: 47px;}

ul.navigation li.about-us { width: 197px; background-position: 0 0; }
ul.navigation li.about-us:hover { width: 197px; background-position: 0 -47px; }

ul.navigation li.services { width: 200px; background-position: -197px 0; }
ul.navigation li.services:hover { width: 200px; background-position: -197px -47px; }

ul.navigation li.products { width: 210px; background-position: -396px 0; }
ul.navigation li.products:hover { width: 210px; background-position: -396px -47px; }

ul.navigation li.news { width: 152px; background-position: -606px 0; }
ul.navigation li.news:hover { width: 152px; background-position: -606px -47px; }

ul.navigation li.contact { width: 183px; background-position: -758px 0; }
ul.navigation li.contact:hover { width: 183px; background-position: -758px -47px; }

jQuery:

$(function(){
$('ul.navigation li a')
    .css( {backgroundPosition: "0 0"} )
    .mouseover(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 -47px)"}, 
            {duration:500})
        })
    .mouseout(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 0)"}, 
            {duration:500})
        })
});

Будем благодарны за любые комментарии.

Answer 1

Одна вещь, которая часто упускается из виду при использовании фоновой анимации в jquery, - это то, что для ее работы нужен дополнительный плагин (хотя и небольшой). Плагин можно найти на http://plugins.jquery.com/project/backgroundPosition-Effect.

Answer 2

Я не знаю, что не работает, но я предполагаю, что ваш jquery не анимирует background position, это потому, что вы уже задали состояние hover в вашем CSS, которое переопределяет анимацию и мгновенно перемещает ваш фоновая позиция ...
Попробуйте еще одну вещь в вашем JavaScript, так как у вас есть background position для .about-us, а не .about-us a

$('ul.navigation li.about-us').stop().animate(
                {backgroundPosition:"(0 -47px)"}, 
                {duration:500})

но в вашем коде jquery вы снова сбрасываете положение фона и при наведении курсора '0 0' ... поэтому я бы посоветовал вам удалить состояние css:hover

Answer 3

Вы должны заменить селектор:

$(this).stop().animate(

с:

$(this).parent('li').animate(

потому что с помощью stop () вы выбираете тег, и вам нужно выбрать тег li.

Answer 4

Я не вижу фонового изображения, примененного к вашему ul.navigation li a. Тем не менее, вы пытаетесь установить и анимировать стиль положения фона.