[jQuery] animating div when the mouse is over

[macsig]

Hi guys,
I have a couple of images with width = 280px and I would like to
display, when the page is loaded, only a piece of them (the left
240px) and all the image once the mouse goes over the image.

This is the html (for 1 image)

<div class="badge" style="width: 240px; height:78px; overflow:
hidden;"><img src="badge_1.gif" /></div>

And here my script


$(document).ready(function(){
$('badge').hover(function() {
                $(this).animate({ width: "280px"});
        }, function() {
                $(this).animate({ width: "240px"});
                $(this).css({ "overflow", "hidden"});
        }
         );
});

I have added the last line because without it the div becomes 240px
but right after that since the image is 280px it returns to 280px.
But with that line I get :

invalid object initializer:     $(this).css({ "overflow", "hidden"});

How can I get the effect I wish???

Thanks and have a nice day!

Sig