Jquery animate jQuery动画在Chrome和IE中不起作用

我创建了一个相对定位的div容器。在这个div容器中，有一个以块显示的图像和一个绝对定位的覆盖div。由于此div容器用于响应性网站场景，因此它没有固定的维度，相反，在任何时候，维度都是由图像的维度决定的，该维度随着屏幕大小的变化而变化

加载页面时，仅显示覆盖的一部分。当用户的嘴悬停在覆盖上时，需要显示覆盖的其余部分，并填充整个div容器。我使用jqueryanimate来实现动画，它只在Firefox中按预期工作，在IE中不工作，在Chrome、IE和Safari中也不工作

以下是代码，您还可以在JSFIDLE中找到实时演示：

以下是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>

#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;
}

(function($){

    $('.overlay').hover(
        function() {
            $(this)
                .animate({
                    top: '0'
                }, 300, function() {
                    $(this).children('.link').css({'text-indent': '0px'});
                });
        }, function() {

        }
    );

}(jQuery));

下面是javascript:

<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>

#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;
}

(function($){

    $('.overlay').hover(
        function() {
            $(this)
                .animate({
                    top: '0'
                }, 300, function() {
                    $(this).children('.link').css({'text-indent': '0px'});
                });
        }, function() {

        }
    );

}(jQuery));