jQuery animate not work in Chrome and IE - jquery-animate

Question

I created a div container which is relative postitioned. In this div container, there are an image which is displayed in block and is responsive image and an overlay div which is absolute positioned. Because this div container is used in responsive website scenario, it does not have a fixed dimension, instead, at any time, the dimension is determined by the dimension of the image which is changing when the size of the screen changes.
When the page is loaded, only part of the overlay is visible. When the user's mouth hovers over the overlay, the rest of the overlay needs to be displayed, and fill the entire div container. I use jQuery animate to implement the animation and it works as expected only in Firefox, and it does not work in IE, and not work in Chrome, IE and Safari.
The following is the code, and you can also find the live demo in the jsfiddle: http://jsfiddle.net/spencerfeng/K9hDn/
Here is the html:
<div id="container">
<img class="responsive-img" src="http://www.fubiz.net/wp-content/uploads/2013/07/One-Ocean-One-Breath14.jpg" alt="">
<div class="overlay">
<h1>This is title</h1>
<div class="content">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words</div>
<a class="link" href="#">See more</a>
</div>
</div>
Here is the css:
#container {
width:400px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.responsive-img {
width:100%;
height:auto;
max-width:100%;
}
.overlay {
position:absolute;
left:0;
right:0;
bottom:0px;
color:#ffffff;
text-align:center;
background: rgb(54, 25, 25);
background: rgba(54, 25, 25, .5);
padding:0 20px;
}
.content {
position:absolute;
}
a.link {
position:absolute;
bottom:10px;
right:10px;
text-indent:-9999px;
text-decoration:none;
color:#ffffff;
}
Here is the javascript:
(function($){
$('.overlay').hover(
function() {
$(this)
.animate({
top: '0'
}, 300, function() {
$(this).children('.link').css({'text-indent': '0px'});
});
}, function() {
}
);
}(jQuery));