jquery 实现动画效果（各种方法）

<button type="button" class="show">普通show</button>
<button type="button" class="show1">一秒show</button>
<button type="button" class="hidden">普通hidden</button>
<button type="button" class="hidden1">一秒hidden</button>
<div id="box" style="width: 100px;height: 100px;background-color: red;"></div>
<script type="text/javascript">
    $(".show").click(function () {
        $("#box").show();
    })
    $(".show1").click(function () {
        $("#box").show(1000);
    })
    $(".hidden").click(function () {
        $("#box").hide();
    })
    $(".hidden1").click(function () {
        $("#box").hide(1000);
    })
　　//还可以添加slow（200）,fast（600）,normal（400）三个参数，默认是400毫秒
</script>

<style>
    div{
        background: red;
        color: #fff;
        margin-left: 5px;
        float: left;
        display: none;
    }
</style>
<div>你</div>
<div>好</div>
<div>吗</div>
<div>？</div>
<button type="button" class="show">显示列队动画</button>
<button type="button" class="hide">隐藏列队动画</button>

<script type="text/javascript">
    $(".show").click(function () {
        //列队动画，递归自调用
        $("div").first().show("fast",function testShow() {
            $(this).next().show("fast",testShow);
        })
    })
    $(".hide").click(function () {
        //列队动画，递归自调用
        $("div").last().hide("fast",function testShow() {
            $(this).prev().hide("fast",testShow);
        })
    })
</script>