jquery 實現動畫效果（各種方法）

1.show()和hide()和toggle()(這是show和hide的一個綜合，一個按鈕就實現顯示和隱藏)

效果：

代碼：

<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>

 2.滑動效果：包括slideUp()和slide()down和slideToggle()和上面實現方式一樣的，效果呈現滑動效果

3.淡入淡出：包括fadeIn()和fadeOut()和fadeToggle()和上面實現方式也是一樣的，效果呈現淡入淡出

但還有一個fadeTo('fast',0.3)   0.3是透明度