Question

有谁知道我怎么能做这个toogle效果我已经用这里的图像管理？当然，我不需要衰落 - 它们可以模拟拉伸和扩展运动。！

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/ 但那不是我真正想要的：）

感谢所有堆垛机;）最好的祝福，小时。

Answer 1

好的，所以诀窍是在相对定位的div中使用auto margin的绝对定位div。所以它可以从中心发展。我在action

中创建了一个小提琴

.container {
    position: relative;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

从顶部和底部以及从底部到顶部拉伸div高度

1 个答案: