慢慢打开/关闭div？

Question

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

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;

更新了小提琴：Transition

BTW，all会使所有修改看起来很慢，如果你只想影响一些属性，你必须用属性名称替换所有：

  

所有3s ---＆gt;宽度1s，底部2s，高度0.2s

Answer 3

像这样更新.top的css

您的更新 JSFiddle

您可以阅读有关转换here

的更多信息

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