浅谈jQuery之动画

show()//从左上角开始显示DOM元素
hide()//从左上角开始隐藏DOM元素
toggle()//反选以上操作
slideUp()//垂直收缩DOM元素
slideDown()//垂直展开DOM元素
slideToggle()//反选以上垂直操作
fadeIn()//淡入
fadeOut()//淡出
fadeToggle()//反选淡入操作
animate()//自定义动画
delay()//实现暂停

PS：toggle、slideToggle、fadeToggle的作用是反选此类型的操作。
animate所包含的函数类型详见Weschool或者菜鸟教程
实战演练：

<p>这是一个段落</p>
<button class="btn1">左上角隐藏</button>
<button class="btn2">左上角显示</button>
<button class="btn3">反选</button>
<button class="btn4">垂直收缩</button>
<button class="btn5">垂直展开</button>
<button class="btn6">反选</button>
<button class="btn7">淡入</button>
<button class="btn8">淡出</button>
<button class="btn9">反选</button>
<button class="btn10">自定义动画</button>
<button class="btn11">串行动画</button>
<script>
    var b1 = $('.btn1');
    var b2 = $('.btn2');
    var b3 = $('.btn3');
    var b4 = $('.btn4');
    var b5 = $('.btn5');
    var b6 = $('.btn6');
    var b7 = $('.btn7');
    var b8 = $('.btn8');
    var b9 = $('.btn9');
    var b10 = $('.btn10');
    var b11 = $('.btn11');
    var p = $("p");
    $(document).ready(function () {
        b1.click(function () {
            p.hide('fast');
        });
        b2.click(function () {
            p.show('slow');
        });
        b3.click(function () {
            p.toggle('show');
        });
        b4.click(function () {
            p.slideUp('show');
        });
        b5.click(function () {
            p.slideDown('show');
        });
        b6.click(function () {
            p.slideToggle('show');
        });
        b7.click(function () {
            p.fadeIn('show');
        });
        b8.click(function () {
            p.fadeOut('show');
        });
        b9.click(function () {
            p.fadeToggle('show');
        });
        b10.click(function () {
            p.animate({
                opacity:0.25,
                width:'256px',
                height:'256px'
            }, 3000, function () {
                console.log('动画已结束');
                $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
            });
        });
        b11.click(function () {
            p.slideDown(2000)
                .delay(1000)
                .animate({
                    width:'256px',
                    height:'256px'
                }, 2000)
                .delay(1000)
                .animate({
                    width:'128px',
                    height:'128px'
                }, 2000);
        });
    });
</script>

运行截图：