jQuery animate() 實現圖片上下晃動效果：使用 setInterval 交替動畫

基本思路

利用 setInterval 定時器，交替執行向上、向下的 animate()，形成晃動視覺效果。

代碼範例

function shakeVertical($el, distance, interval) {
    var up = true;
    setInterval(function() {
        $el.animate({ top: up ? '-=' + distance : '+=' + distance }, 200);
        up = !up;
    }, interval);
}

// 使用
shakeVertical($("#myImage"), 10, 1000); // 每秒上下移動 10px

進階：CSS3 動畫（效能更好）

@keyframes shakeVertical {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.shake { animation: shakeVertical 1s infinite ease-in-out; }

JS 僅需 $el.addClass('shake')，GPU 加速、不阻塞主執行緒。

注意事項

• animate 操作 top 需元素 position: relative/absolute/fixed。
• 頻繁 animate 可能導致佇列堆積，建議 .stop(true, true) 清佇列或用 CSS 動畫。
• 晃動幅度、頻率可透過參數調整，避免造成用戶眩暈。