代码之家 › 专栏 › 技术社区 › Alice

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

effects javascript php

Alice · 技术社区 · 12 年前

此代码切换窗体的可见性:

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在页面上向下推,反之亦然。
我如何才能实现这种形式,不是一秒钟就能看到的,而是一种滑动效果。

2 回复 | 直到 12 年前

Danny G 12 年前

在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
});

EricG 12 年前

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

CSS格式:

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

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

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

推荐文章

Jacco · 未能格式化我的日期以在php中正确工作

1 年前