php - 通过滑动效果显示/隐藏 div

Question

此代码切换表单的可见性：

function getStyle()
{
    var temp = document.getElementById("frm01").style.display;
    return temp;
}
function switch01()
{
    var current = getStyle();
    if( current == "none" )
    {
        document.getElementById("frm01").style.display = "block";
    }
    else
    {
        document.getElementById("frm01").style.display = "none";
    }
}

如果表单变得可见，则底层 div 将在页面上向下推，反之亦然。
我怎样才能实现那种形式变得缓慢可见，不是在一秒钟内，而是像滑动效果一样。

Answer 1

你可以很容易地在 jQuery 中做到这一点。这将适用于所有浏览器。

$("#frm01").slideDown("slow", function() {
    // if you want to have some callback behavior, define that here
});

$("#frm01").slideUp("slow", function() {
    // if you want to have some callback behavior, define that here
});

Answer 2

一种常见的技术是将其隐藏在另一个元素下，然后应用过渡效果。

CSS：

#frm01 {
    -webkit-transform: translate3d( 0, 0, 0 ); /* Default */
}

#frm01.animate {
    -webkit-transform: translate3d( 0, 200px, 0 ); /* Move in Y-direction */
}

其他浏览器也有类似的语法。