动画到顶部

时间:2013-06-11 05:57:03

标签: jquery html css

JS -

$(".inner").hover(function () {
    $(this).stop(true, false).animate({
        height: "400px"
    });
}, function () {
    $(this).stop(true, false).animate({
        height: "100px"
    });
});

的CSS -

.inner {
    height:100px;
    width:400px;
    background-color:#333;
    margin-bottom:0px;
}

.outer {
    height:400px;
    width:400px;
    background-color:#999;
}

我想要做的是较小的盒子在大盒子里面对齐底部,动画发生在上方,但是底部和边缘底部没有任何帮助。 这是链接 -

http://jsfiddle.net/4nYW6/

2 个答案:

答案 0 :(得分:2)

试试这个

.inner {
    height:100px;
    width:400px;
    background-color:#333;
    margin-bottom:0px;
    bottom:0;
    position:absolute;
}

.outer {
    height:400px;
    width:400px;
    background-color:#999;
    position:relative;
}

jsFiddle File

答案 1 :(得分:1)

<强> Working jsFiddle Demo

定位你的元素:

.inner {
    height:100px;
    width:400px;
    background-color:#333;
    position: absolute;
    bottom: 0;
    left: 0;
}

.outer {
    height:400px;
    width:400px;
    background-color:#999;
    position: relative;
}

奖金

您可以使用纯CSS执行此操作:

.inner {
    height:100px;
    width:400px;
    background-color:#333;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: height 0.5s;
}

.outer {
    height:400px;
    width:400px;
    background-color:#999;
    position: relative;
}

.inner:hover .inner {
    height: 400px;
}
  • 神奇的是:hover伪类和transition属性。
  • 检查jsFiddle Demo