Question

我创建了一个相对位置的div容器。在这个div容器中，有一个图像以块显示，是响应图像和绝对定位的叠加div。由于此div容器用于响应式网站场景，因此它没有固定的维度，而是在任何时候，维度由图像的维度决定，当屏幕大小发生变化时，维度会发生变化。

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

以下是代码，你也可以在jsfiddle中找到现场演示：http://jsfiddle.net/spencerfeng/K9hDn/

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

这是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;
}

以下是javascript：

(function($){

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

        }
    );

}(jQuery));

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

0 个答案: