My HTML:
<div class="home-button">
 <span><a href="#" style="">Button</a></span>
</div>

I have an instance of a div (button), inside this div is a link wrapped in a span.
When you hover over the div (".home-button")I want to move the background
position inside its "span a", I've achieved this using the code below.

My Script:
$(".home-button").hover(
      function ()
      {
 $(this).children("span").children("a")
 .animate({backgroundPosition: '0px 0px'});
      },
      function ()
      {
 $(this).children("span").children("a")
 .animate({backgroundPosition: '-250px 0px'});
      }
);

The only problem is that it is inefficient and the browser starts to lag. I think
this is due to the fact that the .children function carries out a search and I'm having
to use it twice.

Is there a better way of doing this or am I stuck here? I appreciate any help anybody may
be able to offer. In the meantime I'm using non-animated css to achieve the effect.

Thank you.