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;
}
我想要做的是较小的盒子在大盒子里面对齐底部,动画发生在上方,但是底部和边缘底部没有任何帮助。 这是链接 -
答案 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;
}
答案 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
属性。