0

ここの画像で管理したこのトゥーグル効果をどのように行うことができるか知っている人はいますか? もちろん、フェードは必要ありません。フェードは、ストレッチと展開の動きをシミュレートするために維持されています。!

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/ しかし、それは私が本当に夢中になっていることではありません:)

すべてのスタッカーに感謝します;)よろしく、H.

4

1 に答える 1

1

さて、トリックはauto margin、相対配置されたdiv内で絶対配置されたdivを使用することです。そのため、中心から成長することができます。私はフィドルを作成しました

.container {
    position: relative;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
于 2013-07-03T18:56:59.087 に答える