您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

jQuery 動畫效果完全指南：從基礎顯隱到自定義佇列動畫

編輯：Java 相關知識

動畫方法分類總覽

類別	方法	說明
顯示/隱藏	`show()` / `hide()` / `toggle()`	尺寸+透明度漸變，支援速度參數與回調
滑動	`slideDown()` / `slideUp()` / `slideToggle()`	高度漸變，適合手風琴選單
淡入/淡出	`fadeIn()` / `fadeOut()` / `fadeToggle()` / `fadeTo()`	透明度漸變，`fadeTo` 可指定目標透明度
自定義	`animate(props, speed, easing, callback)`	任意 CSS 數值屬性動畫，支援相對值 `+=100px`
佇列控制	`queue()` / `dequeue()` / `clearQueue()` / `delay()`	動畫序列管理，`queue(callback)` 插入非動畫步驟
停止/延遲	`stop(clearQueue, jumpToEnd)` / `delay(ms)`	中止動畫、清空佇列、跳至終態、延遲觸發

速度參數

毫秒數：1000 (1秒)
預設字串："slow" (600ms)、"normal" (400ms)、"fast" (200ms)
錯誤/空值回退為 400ms

核心範例精選

1. 回調實現序列動畫

// 方式一：具名函數遞迴
$('#box').show('slow', function showNext() {
    $(this).next().show('slow', showNext);
});

// 方式二：arguments.callee 匿名遞迴
$('#box').show('slow', function() {
    $(this).next().show('slow', arguments.callee);
});

2. 自定義動畫多屬性同步

$('.animate').click(function() {
    $('#box').animate({
        width: '300px',
        fontSize: '50px',
        opacity: 0.5
    }, 2000, function() {
        alert('動畫結束');
    });
});

3. 相對位移動畫 (需 CSS position: relative/absolute)

$('#box').animate({
    left: '+=100px',  // 相對當前位置右移 100px
    width: '+=50px'
});

4. 佇列管理：插入非動畫步驟

$('#box')
    .slideUp('slow')
    .slideDown('slow')
    .queue(function(next) {
        $(this).css('background', 'orange'); // 非動畫操作入佇列
        next(); // 必須呼叫 next() 釋放佇列繼續
    })
    .hide('slow');

5. 停止控制

// 立即停止當前動畫，清空佇列，不跳至終態
$('#box').stop(true, false); 

// 立即停止，清空佇列，跳至終態
$('#box').stop(true, true);

6. 延遲觸發

$('#box')
    .delay(1000)           // 開始前延遲 1 秒
    .animate({left: 300}, 1000)
    .delay(500)            // 中間延遲 0.5 秒
    .animate({top: 300}, 1000);