jQuery自訂動畫函
jQuery 動畫 - animate() 方法
# jQuery animate() 方法用於建立自訂動畫。
語法：
$(selector).animate({params},speed,callback);必要的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成後執行的函數名稱。
下面的範例示範animate() 方法的簡單應用；它把<div> 元素移到左邊，直到left 屬性等於250 像素為止：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</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>
##提示：預設地，所有HTML 元素都有一個靜態位置，且無法移動。若要對位置進行操作，請記得先把元素的 CSS position 屬性設為 relative、fixed 或 absolute！ jQuery animate() - 操作多個屬性
#請注意，生成動畫的過程中可同時使用多個屬性：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</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>提示：可以用animate() 方法來操作所有CSS 屬性，不過，需要記住一件重要的事情：當使用animate() 時，必須使用Camel 標記法書寫所有的屬性名，例如，必須使用paddingLeft 而不是padding-left，使用marginRight 而不是margin-right，等等。同時，色彩動畫並不包含在核心 jQuery 函式庫中。如果需要產生顏色動畫，您需要從 jQuery.com 下載 Color Animations 外掛程式。 jQuery animate() - 使用相對值
#也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</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>######jQuery animate() - 使用預先定義的值
#您甚至可以把屬性的動畫值設為"show"、"hide" 或"toggle"：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</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> ##jQuery animate() - 使用佇列功能
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</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>#########
新建檔案
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>jQuery Animation - fadeTo </title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
$("#divPop").animate(
{
"opacity": "hide",
"width": $(window).width()-100 ,
"height": $(window).height()-100
},
2000
);
});
</script>
</head>
<body>
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;">
<div style="text-align: center;">pop div</div>
</div>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 