为什么jQuery backgroundPosition动画函数是跳跃而不是动画？

Question

我正在尝试创建3个按钮(图像是一个背景图像)，动画时，做一个鼠标悬停。

当我使用下面的html，css和js时，结果是一个jquery动画，动画只是跳转到结果，而不是创建一个平滑的动画。

查看结果：http://infinitize.com，当前只有第一个按钮设置了动画。

CSS：

/*-- HOMEPAGE --*/
#buttons {margin-top:60px;}
#buttons a {display:inline-block;width:160px;border-bottom:none;color:#4b4f52;text-shadow:0 1px 0 #fff;font-size:20px;padding-top:180px;text-align:center;}
.bg-img-home {background:transparent url(<r:assets:url title="bg-img-home" />) no-repeat;}
#webdesign {background-position:0px 0px;}

HTML：

<div id="buttons" class="span-24 last">
    <div class="span-3">&nbsp;</div>
    <div id="webdesign" class="span-5 bg-img-home"><a href="#" id="jump-webdesign">WebDesign<br />Web Development</a></div>
    <div class="span-2">&nbsp;</div>
    <div id="ecommerce" class="span-5 bg-img-home"><a href="#" id="jump-ecommerce">E-Commerce Solutions</a></div>
    <div class="span-2">&nbsp;</div>
    <div id="openbravo" class="span-5 bg-img-home"><a href="#" id="jump-openbravo">OpenBravo<br />ERP/POS solutions</a></div>
    <div class="span-2 last">&nbsp;</div>
</div>

脚本：

$(document).ready(function(){
    $("#jump-webdesign").hover(function(){
            $("#webdesign")
            .animate({backgroundPosition: '0px -10px'},200).animate({backgroundPosition:'0px 0px'},200)
    });
}); 

Answer 1

将动画时间设置为更长的值，200毫秒是非常快的。

根据您的评论，尝试将顶部边距设置为动画：

$("#jump-webdesign").hover(
    function() {
        $(this).children("#webdesign").animate({
            marginTop: "-10px"
        }, 500);
    },
    function() {
        $(this).children("#webdesign").animate({
            marginTop: "0px"
        }, 500);
    }
);