0

親の後ろから要素をスライドさせるために使用したい小さな CSS トランジションがあります。

エレメント：

#contact-form{
    background: #f2f2f2;
    text-align: center;
    top:-20em;
    display:none;
    position: relative;
    padding: 2em 0;
    width:100%;

    -webkit-transition: top 0.2s ease;
    -moz-transition: top 0.2s ease;
    -ms-transition: top 0.2s ease;
    -o-transition: top 0.2s ease;
    transition: top 0.2s ease;
}

jQuery:

$('#contactBtn').click(function(){
    $('#contact-form').css('top', 0).toggle('display');
});

ご想像のとおり、これにより、要素が上からではなく、左上隅からスライドインします (要素が「表示なし」の場合、幅がないためです)。

トランジションが要素の幅ではなく高さのみをターゲットにするようにする最善の方法は何ですか? ページの途中に表示されるナビゲーションバーに接続されているため、top:-20 から開始する必要があります。

4

3 に答える 3

1

あなたは試すことができます

$("#contact-form").slideToggle();

おそらく、この例が役立つでしょう: http://jsfiddle.net/dJS4g/

于 2013-04-20T05:41:48.083 に答える
0

これがあなたの仕事をすることができるかどうか見てください。

div
{
visibility:hidden;
}
于 2013-04-20T05:42:46.610 に答える