I've just implemented a background animate on some social media icons where the image goes from grey to color on `:hover`.

I wanted to know if there's a better way to write the following but also implement a fade, so as the background animates, it's also fading in on hover.

```
    <script type="text/javascript">

$(function(){
    $('#facebook')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-63px 0px)"}, {duration:150})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:150})
        })
    $('#twitter')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-63px 0)"}, {duration:150})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:150})
        })
});
</script>

```