Adding fade to jquery background position animate 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.

    &lt;script type="text/javascript"&gt;

$(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})
        })
});
&lt;/script&gt;
I wanted to know if there's firstly a better way to write the following


Well, not much to be improved but you can simplify things a little bit using hover()

$('#facebook')
.css('background-position', '0 0')
.hover(function () {
    $(this).stop().animate({
        'background-position' : '(-63px 0px)'
    }, 150);
}, function () {
    $(this).stop().animate({
        'background-position' : '(0 0)'
    }, 150);
});



  implement a fade so as the background animates it's also fading in on hover


Your best bet is to implement it with two separate images instead of a sprite. You absolute position each image on top of each other, animate their top for the moving effect, and then fadeIn()|fadeOut().