慢慢打开/关闭div？

Question

我有以下代码，在鼠标悬停时打开/关闭图像上方的div。 有没有办法让它产生效果？ 如果有的话，有例子吗？ 我已经搜索了它们，但我不是js英雄。

HTML：

<div>
<div class="under"><img src="http://oi60.tinypic.com/244xp91.jpg" alt="test"></div>
<div class="top">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aurabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>

CSS：

div {
    height: 400px;
    width: 600px;
}

div > div {
    height: 70px;
    position: absolute;
}

.under {
    background: yellow;
    top: 0px;
}

.top {
    background: #008285;
    bottom: -50px;
    top: 330px;
}

.top:hover {
    background: #008285;
    bottom: 100px;
    height: 300px;
    top: 100px;
}

JSFiddle： http : //jsfiddle.net/2obp1hgL/

Answer 1

您可以使用

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
 transition: all 0.5s ease;

CSS属性： http ： //jsfiddle.net/2obp1hgL/3/

Answer 2

只需将其放在top CSS中（3秒是秒，请根据需要进行更改）：

-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;

更新的小提琴： 过渡

顺便说一句， all都会使所有修改看起来很慢，如果您只想影响某些属性，则必须用属性名称替换所有属性：

全部3s->宽度1s，底部2s，高度0.2s

Answer 3

像这样更新.top的CSS

您更新的JSFiddle

您可以在此处了解有关过渡的更多信息

.top {
        background: #008285;
        bottom: -50px;
        top: 330px;
            /* For Safari 3.1 to 6.0 */
        -webkit-transition-property: all;
        -webkit-transition-duration: 1s;
        /* Standard syntax */
        transition-property: all;
        transition-duration: 1s;
    }

最好使用JavaScript进行此操作，因为过渡支持

Answer 4

您可以使用CSS属性转换，这是jsfiddle

.top {
    background: #008285;
    bottom: -50px;
    top: 330px;
    -webkit-transition: top .5s, bottom .5s, background, .5s; 
    transition: top .5s, bottom .5s, background, .5s;
}