Animate backgroundPostion总是返回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); 
    });