jQuery |動畫

利用jQuery ，自己動手做動畫。

使用jQuery 的animate() 方法，制作動畫。

$(selector).animate({params},speed,callback); 必需的 params 參數定義形成動畫的 CSS 屬性。 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是動畫完成後所執行的函數名稱。

$("button").click(function(){ $("div").animate({left:'250px'}); }); left:屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 padding:設定一個元素的填充 <a href="https://link.jianshu.com?t=http%3A%2F%2Fwww.runoob.com%2Ftry%2Ftry.php%3Ffilename%3Dtryjquery_animation1" target="_blank">嘗試一下 »</a>

生成動畫的過程中可同時使用多個屬性： $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' <a href="https://link.jianshu.com?t=http%3A%2F%2Fwww.runoob.com%2Ftry%2Ftry.php%3Ffilename%3Dtryjquery_animation1_multicss" target="_blank">嘗試一下 »</a>

定義相對值（該值相對于元素的目前值）。需要在值的前面加上 += 或 -=

height:'+=150px', width:'+=150px' height:'+=150px':表示height=height+150，給目前div高度+150px像素 <a href="https://link.jianshu.com?t=http%3A%2F%2Fwww.runoob.com%2Ftry%2Ftry.php%3Ffilename%3Dtryjquery_animation1_relative" target="_blank">嘗試一下 »</a>