[jQuery] sliding button

Hello guys,
I'm trying to create a couple of "download" buttons (one placed at the
left and the other at the right of my page) with sliding effect:
basically I want to show just a piece of it and when the mouse goes
over to slide it in order to show if the linked document is available
or not.

I have successfully implemented the effect I want for the right button
as described below:

#HTML
<div class="download_badge" style="float: right;"><img src=
"badge_whitepaper.png"></div>

#CSS
.download_badge {
width: 209px;
height:79px;
overflow: hidden;
}

#JS
$(document).ready(function(){
$('.download_badge').hover(function() {
$(this).animate({ width: "273px"});
}, function() {
$(this).animate({ width: "209px"});
$(this).addClass("download_badge");
}
);
}

you can see the final result here: http://www.vimeo.com/5891973

Now my question: how can I achieve the same effect for the left
button?

On left side I need to show the right part of the image and animate it
when the mouse is over but how can I do that?

Thanks

Sig