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 */
}

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

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

2 个答案: