动画背景位置总是返回 50%？

Question

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

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

Answer 1

删除额外的 "(....)" ，这是无效的 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);
    });