自定義動畫——animate()

時間 2019-11-17

標籤自定義動畫 animate 简体版

原文原文鏈接

在JQuery中，經過使用animate()方法，能夠容許用戶自定義動畫，製做出效果更優雅、動做更復雜的頁面動畫效果。javascript

animate()方法給開發者自定義各類複雜、高級的動畫提供了極大的方便和空間，其調用語法爲:css

　　animate(params,[duration],[easing],[callback])html

　　參數params表示用於製做動畫效果的屬性樣式和值的集合。java

　　可選項[duration]表示三種默認的速度字符「slow」、「normal」、「fast」或自定的數字。jquery

　　可選參數[easing]爲動畫插件使用，用於控制動畫的表現效果，一般有「linear」和「swing」字符值。ajax

　　可選參數[callback]爲動畫完成後，執行的回調函數。api

PS：在動畫方法animate()中，第一個參數params在表示動畫屬性時，須要採用「駱駝」寫法，即若是是「font-size」，必須寫成「fontSize」纔有效，不然報錯。函數

（1）功能描述動畫

　　在頁面中，單機某塊<div>元素，其自身的高度和寬度以動畫的效果增大。動畫完成後，元素的邊框加粗，而且邊框顏色及<div>元素內容發生變化。ui

（2）實現代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
    .box{border: solid 1px #ccc;background-color: #eee;width: 100px;height: 100px;font-size: 13px;padding: 5px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
    $(function(){
        $(".box").click(function(){
            $(this).animate({    //寬與高變化的動畫效果
                width:"20%",
                height:"200px"
            },
            3000,function(){
                $(this).css({"border":"solid 4px orange"})
                .html("變大了！");
            });
        });
    })
</script>
</head>
<body>
    <div class="box">
        點擊變大
    </div>
</body>
</html>

結果以下圖所示：

經過animate()方法，不只能夠用運動效果增長元素的長和寬，還能以動畫效果移動頁面種的元素，即改變其相對位置。

例如：

$("div").animate({
　　left:"20px",
　　top:"60px"
},3000)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。