首頁 > web前端 > js教程 > JavaScript強化教學――jQuery動畫

JavaScript強化教學――jQuery動畫

黄舟
發布: 2017-01-21 16:03:19
原創
1247 人瀏覽過

jQuery 動畫 - animate() 方法

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

語法:

$(selector).animate({params},speed,callback);
登入後複製

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

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

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

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

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

實例

$("button").click(function(){ $("div").animate({left:'250px'}); });
登入後複製
<!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)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板