jquery.easing的使用

時間 2019-12-01

標籤 jquery.easing jquery easing 使用欄目 JQuery 简体版

原文原文鏈接

下載地址:http://www.jb51.net/jiaoben/32922.htmljavascript

基本語法：easing:格式爲json,{duration:持續時間,easing:過渡效果,complete:成功後的回調函數}html

介紹：easing是jquery的一個插件，使用它能夠建立更加絢麗的動畫效果。java

環境：由於easing是jQuery的插件，因此必須是在引入jquery以後再引入它，以下：jquery

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>

使用：json

easing是基於animate這個函數,animate的語法:animate(params,speed,easing,fn);函數

params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合,必須爲json格式動畫

speed：三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)spa

easing：過渡效果名稱,默認jquery只提供"linear" 和 "swing",默認過渡效果是"swing".net

fn:動畫完成時執行的函數插件

若是在沒引入easing的狀況下若是想改變元素的left:

html:

<div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>

jquery代碼：

$(function (){
    $(document).click(function (){
        $("div").animate({left: "300px"}, 1000,"linear",function (){
            alert('a');
        });
    });
});

在引入easing以後animate語法：animate(params,easing)

params：一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合,必須爲json格式

easing:格式爲json,{duration:持續時間,easing:過渡效果,complete:成功後的回調函數}

例子：一樣改變left值

html:

<div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>

jquery:

$(function (){
    $(document).click(function (){
        $("div").animate({left: "300px"},{
            duration:1000,
            easing:"easeOutBounce",
            complete:function (){
                alert("動畫完成");
            }
        });
    });
});

完整代碼：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function (){
    $(document).click(function (){
        $("div").animate({left: "300px"},{
            duration:1000,
            easing:"easeOutBounce",
            complete:function (){
                alert("動畫完成");
            }
        });
    });
});
</script>
</head>
<body>
<div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>
</body>
</html>

相關標籤/搜索

每日一句

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