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