jQuery 同時執行淡入與位移動畫：單一 animate 即可

需求：隱藏的 <div> 顯示時同時向左移動。嘗試 fadeIn().animate(...) 會導致動畫串列執行（先淡入再移動）。

錯誤寫法

$("div").fadeIn().animate({left: "-50px"}); // 循序執行

正確寫法：合併屬性到單一 animate

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div style="border:1px solid #000;width:100px;height:100px;position:absolute;left:200px;top:200px;opacity:0;background:#000"></div>
<script>
$("div").animate({ left: "-50px", opacity: 1 }, 1000);
</script>

原理

• animate() 可同時插值多個 CSS 數值屬性（opacity、left、top、width 等）。
• fadeIn() 內部就是 animate({opacity: 'show'})，拆開反而變成隊列。
• 持續時間 1000（毫秒）同步完成。

進階控制

• 緩動函數：animate(props, 1000, 'swing') 或 'linear'。
• 完成回呼：animate(props, 1000, function(){ ... })。
• 停止動畫：.stop(true, true) 清空隊列並跳至終態。

一條 animate 搞定所有同步 CSS 動畫。