jquery - Animate backgroundPostion始终返回50％？

我正在尝试做一个非常非常简单的鼠标悬停，以动画显示背景位置的变化。

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。

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

最佳答案

删除多余的"(....)"无效的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);
    });