[jQuery] sliding button

[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