Why is the jQuery backgroundPosition animate function jumping instead of animating?

Question

I'm trying to create 3 buttons (image is a background image) that animate smoothly when doing a mouseover.

When I'm using the following html, css and js, the result is a jquery animation where the animation just jumps to the result in stead of creating a smooth animation towards the result.

See the result at: http://infinitize.com, currently only the first button is animated.

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>

Script:

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

Answer 1

Set your animate time to something longer, 200 milliseconds is very fast.

Based on your comment, try to animate the top margin:

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