首頁 > 文章 > web前端 > JavaScript強化教學――jQuery動畫

JavaScript強化教學――jQuery動畫

黄舟原創: 2017-01-21 16:03:191213瀏覽

jQuery 動畫 - animate() 方法

jQuery animate() 方法用於建立自訂動畫。

語法：

$(selector).animate({params},speed,callback);

必要的 params 參數定義形成動畫的 CSS 屬性。

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成後所執行的函數名稱。

下面的例子示範animate() 方法的簡單應用；它把

元素移到左邊，直到left 屬性等於250 像素為止：

實例

$("button").click(function(){ $("div").animate({left:&#39;250px&#39;}); });

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:&#39;250px&#39;});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

以上就是JavaScript強化教程，更多相關內容請關注PHP中文網（www.php.cn）！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript強化教學――Native.js範例匯總下一篇：JavaScript強化教學――Native.js範例匯總

看更多

JavaScript強化教學――jQuery動畫

相關文章