从上到下、从下到上拉伸div高度
从上到下、从下到上拉伸div高度
提问于 2013-07-04 02:40:53
有没有人知道我怎么才能用这张图片实现我的这个涂鸦效果呢？当然，我不需要淡入淡出--它们是用来模拟拉伸和扩展运动的。好了！
http://img837.imageshack.us/img837/6237/jxz.gif
到目前为止，我唯一拥有的代码是：
HTML
<a id="line-1">click</a>
<div id="unique-id">
<div class="bum">
dsfsadfasdfsafd
</div>
CSS
#unique-id {
width: 100%;
height: 200px;
background-color: red;
position: absolute;
bottom: 0px;
}
.bum {
background: green;
width:60px;
height: 60px;
top:50%;}JS
// Activate Line 1
$('a#line-1').click(function() {
console.log()
$('div#unique-id').animate({
position: 'relative',
height: 'toggle'
}, 500, function() {
});
});http://jsfiddle.net/t9yJD/54/，但这不是我真正喜欢的:)
感谢所有的stackers ;)最好的问候，H。
回答 1
Stack Overflow用户
发布于 2013-07-04 02:56:59
好的，所以诀窍是在相对定位的div中使用带有auto margin的绝对定位的div。所以它可以从中心开始生长。我已经创建了一个小提琴在action中查看它
.container {
position: relative;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17455769
复制相关文章
相似问题
腾讯云开发者
