[jQuery] animating div when the mouse is over
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