JQuery的動畫與特效

顯示與隱藏：

    show([speed]);                        顯示

    show(speed, [callback]);
    hidden([speed]);                     隱藏

    hidden(speed, [callback]);

    toggle();                                  切換

    toggle(switch);

    toggle(speed, [callback]);

    注：callback回調函數都是在動畫執行完畢後執行的方法。

滑動：

    slideDown();                            滑下
    slideDown(speed, [callback]);

    slideUp();                                  滑上
    slideUp(speed, [callback]);

    無論是slideDown()還是SlideUp()方法，他們的動畫效果僅是減小或增加元素的告訴，同時，如果元素有margin或padding值，這些屬性也會以動畫效果一起發生改變。

    slideToggle();                            自動判斷滑上滑下

    slideToggle(speed, [callback]);

淡入淡出：

    fadeIn();                                        淡入，改變元素的所有顯示屬性
    fadeIn(speed, [callback]);

    fadeOut();                                     淡出
    fadeOut(speed, [callback]);

    fadeTo();                                        改變元素透明度切換元素顯示狀態，其透明度從0.0到1.0淡出或從1.0到0.0淡入

    fadeTo(speed, opacity, [callback]);    到指定透明度值，opacity取值爲0.0~1.0

自定義動畫：

    animate(params, [duration], [easing], [callback]);

    params表示用於製作動畫效果的屬性樣式和值得集合。

    可選項duration表示三種默認速度字符“slow”、"normal"、"fast"或自定義數字。

    可選項easing爲動畫插件使用，用於控制動畫的表現效果，通常有"linear"、"swing"等字符值。

    可選項callback爲動畫完成後執行的回調函數。

    例：

        $("#myDiv").click(function(){

            $(this).animate({width:"20px",height:"20px"}, 2000, function(){...});

        });

    隊列中的動畫：

        $("#myDiv").click(function(){

            $(this).animate({height:100}, 2000).animate({width:100}, 2000).animate({height:50},2000).animate({height:50}, 2000);

        });

    動畫將依次完成一系列動畫。

動畫停止和延時：

    stop();

    stop([clearQueue], [gotoEnd]);

    該方法的功能是停止所選元素中正在執行的動畫，其中可選參數[clearQueue]是一個bool值，表示是否停止正在執行的動畫，另外一個可選參數[gotoEnd]也是一個bool值，表示是否立即完成正在執行的動畫。

    delay();

    delay(duration, [queueName]);

    該方法的功能是設置一個延時值來推遲後續隊列中動畫的執行，其中參數duration爲延時的時間值，單位爲毫秒。

    可選參數[queueName]表示隊列名詞，即動畫隊列。