jquery - 动画到顶部

Question

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/

Answer 1

Try this

.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

Answer 2

工作 jsFiddle 演示

定位您的元素：

.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 演示。