特效：客製化 (jQuery23)

官網連結

目前有10個
.animate：動畫的老大

.queue()：將一小段動畫放在一起，很多個時，就可以組成很多的queue
.dequeue()：有寫這行才會跳到下一個queue，最後一個queue在最後下dequeue並不會跑回第一個queue
.clearQueue()：按下後，queue會將目前的queue跑完才停止，但不做下一個queue
.stop()：按下後，queue馬上停止並做下一個queue
.finish()：按下後，會直接將queue做完，但只會執行.animate的部分
.delay()：可以延遲指定的時間

jQuery.fx.interval：動畫的頻率，預設是13，單位是毫秒
jQuery.fx.off：是否將動畫關閉的功能，預設是false，寫個按鈕，內容是「$.fx.off = true;」，會發現按下後，動畫不是沒作用，是直接到最後的結果；但如果動畫執行到一半，看似沒有作用，其實是要等下一次才有作用
jQuery.speed：看起來和animate很像，感覺是能和animate分開，官方說在jQuery UI的addClass找到範例，看官網首頁最上面黃色很像U的就是jQuery UI，左邊真的有addClass，而右邊還有一些動畫的方法，但我就是沒找到範例

※animate

$(function(){
    $('#xxx').click(function() {
        $('span').animate({
            opacity: 0.25,
            left: "+=50",
            height: "toggle"
        }, 3000, function() {
            alert('success!');
        });
    });
});
----------
<div id="xxx" style="background-color:lightblue;">div</div>
<span>s1</span>
<span>s2</span>

※還有很多，看官網

※queue、dequeue、clearQueue、stop、finish、delay

$(function(){
    $('#start').click(function(){
        // 看過程
        $('div').show('fast');
    
        // 往右200
        $('div').animate({left:'+=200'}, 1000);
        $('div').queue(function () {
            $(this).css('background-color', 'yellow');
            $(this).dequeue();
        });
    
        // 往左200
        $('div').animate({left:'-=200'}, 1000);
        $('div').queue(function () {
            $(this).css('background-color', 'red');
            $(this).dequeue();
        });
    
        // 往右500
        $('div').animate({left:'+=500'}, 2000);
        $('div').queue(function () {
            $(this).css('background-color', 'pink');
            // $(this).dequeue();
        });
    });
    
    $('#clearQueue').click(function(){
        $('div').clearQueue();
    });
    
    $('#stop').click(function(){
        $('div').stop();
    });
    
    $('#finish').click(function(){
        $('div').finish();
    });
});
----------
<input id="start" type="button" value="開始" />
<input id="clearQueue" type="button" value="clearQueue" />
<input id="stop" type="button" value="stop" />
<input id="finish" type="button" value="finish" />
<br><br>
<div style="background-color:green; height:50px; width:50px; left:5px; top:40px; position:absolute;"></div>

※按此範例開始鈕第二次後，div會從最後結束的地方開始

※$('div').slideUp(1000).delay(2000).fadeIn(1000);會發現delay的功能