Is there a way to animate fixed position images with jQuery animate function?

I have some social icon links at the side of my web page and they are positions using CSS position:fixed so that they don't mo开发者_StackOverflow社区ve when the rest of the page is scrolled.

The icon images are 90px wide and what I've also done is position them mostly off-screen so that only 15px of them are visible until mouseover - then the rest of them appear. I accomplish this using CSS and the .hover attribute but they just 'pop' out by doing it this way.

I'd like to have smoothy slide out and it seems to me the best way to do this would be to use the jquery animate function however I have absolutely no idea how to do it.

Here's the CSS I'm currently using to shift the images ....

.floater-side-fb {
    position:fixed;
    bottom: 600px;
    right:-70px;
}
.floater-side-fb a:hover{
    position:fixed;
    bottom: 600px;
    right: -5px;
}

and the html ...

<div class="floater-side-fb">
<a href="http://www.facebook.com/" target="_blank"><img src="images/facebook-icon.png" /></a>
</div>

Have a look at the .animate() documentation.

$('.floater-side-fb').hover(function() {
    $(this).stop().animate({ 'right': '-5px' }, 'slow', 'linear');
}, function() {
    $(this).stop().animate({ 'right': '-70px' }, 'slow', 'linear');
});

NB. You'll want to remove that :hover class in the CSS first.