jQuery效果-滑动（slide系列）

在body中你需要四个div块

<div id="flipshow">点击</div>
<div id="fliphide">隐藏</div>
<div id="fliptoggle">隐藏/显示</div>
<div id="content">Hello World</div>

在js文件中写入如下内容

$(document).ready(function(){
    $("#flipshow").click(function(){
        $("#content").slideDown(1000);
    });
    //设置点击按钮，slideDown属性的效果
    $("#fliphide").click(function(){
        $("#content").slideUp(500);
    });
    //设置隐藏按钮，slideUp属性的效果
    $("#fliptoggle").click(function(){
        $("#content").slideToggle(1000);
    });
    //设置隐藏/显示按钮，slideToggle属性的效果
});

在css文件中写入如下内容

#content,#flipshow,#fliphide,#fliptoggle{
    padding: 5px;
    text-align: center;
    background-color: #ece023;
    border: solid 1px #ece999;
}
#content{
    padding: 50px;
    display:none; 
}

运行效果

总结：

     点击点击按钮后会显示出Hello World 片段，点击隐藏按钮则会把Hello World片段隐藏，而隐藏和显示按钮则两个功能都兼并。

    slideDown属性是把隐藏内容来显示，slideUp则会把显示的内容隐藏，slideToggle则可以把内容进行显示和隐藏（需要点一下显示，再点一下隐藏）

注：别忘记引入jQuery文件、js文件和css文件