[jQuery] sliding button

[macsig]

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