Анимировать backgroundPostion всегда возвращает 50%? - PullRequest
Новая
       6

Анимировать backgroundPostion всегда возвращает 50%?

0 голосов
/ 10 октября 2010

Я пытаюсь сделать очень-очень простое наведение мыши, которое оживляет изменение положения фона.

JS 

$('li.services_w')
    .css({
        backgroundPosition: "0px 0px"
    })
    .mouseover(function () {
        $(this).stop().animate({
            backgroundPosition: "(0px -35px)"
        }, {
            duration: 500
        })
    })
    .mouseout(function () {
        $(this).stop().animate({
            backgroundPosition: "(0px 0px)"
        }, {
            duration: 200,
            complete: function () {
                $(this).css({
                    backgroundPosition: "0px 0px"
                })
            }
        })
    });

За исключением случаев, когда я запускаю этот код, фон всегда возвращает background-position: 0 50% как результат наведения мыши. Что бы я ни менял эти цифры! Уверяю вас, это единственный javascript, который я использую.

1012 * CSS *

.services_w {
  height: 35px;
  overflow:hidden;
  background: url("../img/services_w.jpg") repeat 0px 0px;
}
.services_w:hover {
  background-position: 0px -35px;
}

HTML 

<div class="grid_10 nav">
  <ul class="lavaLamp">
    <li class="current"><a href="index.html">home</a></li>
    <li class="services_w"><a href="services.html">services</a></li>
    ...

1 Ответ

2 голосов
/ 10 октября 2010

Удалите лишний "(....)" недопустимый CSS, например: 

$('li.services_w')
    .css( {backgroundPosition: "0px 0px"} )
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:"0px -35px"}, {duration:500})
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:"0px 0px"}, {duration:200, complete:function(){
            $(this).css({backgroundPosition: "0px 0px"})
        }})
    });

Или немного чище, используя .hover() и указав длительность напрямую: 

$('li.services_w').css( {backgroundPosition: "0px 0px"} )
    .hover(function(){
        $(this).stop(true, true).animate({backgroundPosition:"0px -35px"}, 500);
    }, function(){
        $(this).stop(true, true).animate({backgroundPosition:"0px 0px"}, 200);
    });
...