## animate 動畫函數
## 語法:
```
$(selectior).anmate(json,time,callBack);
```
## 可以僅使用:
$(selectior).anmate(json)
##
詳細語法:
~~~
$("div").animate({"left":500},2000,function(){
console.log("動畫完成后執行一次“callBack");
});
~~~
~~~
$("div").animate({"left":500,"top":300,"width":150},2000,function(){
console.log("動畫完成后執行一次“callBack");
});
~~~
第一個參數:json格式用來設置動畫完成最終的樣式屬性值。
第二個參數:time動畫時間 ,,可有可無的(單位是毫秒)
第三個參數為callBack,當動畫執行完畢的時候立即執行一次。(可以設置)也是可有可無的。
## 代碼案例:
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.2.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
position:absolute;
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script type="text/javascript">
$("div").animate({"left":500},2000,function(){
console.log("動畫完成后執行一次“callBack");
});
</script>
~~~
## 折疊卡動畫使用案例 當點擊后 執行動畫
$(".shouSou").click(function (){
$(".left").stop(true).animate({width:"0px"});
});
~~~
$(".shouSou").click(function (){
if($(".left").width()===200){
$(".left").stop(true).animate({width:"0px"})
$(".shouSou").html("展開");
$(".listbiao").css("display","none");
}else {
$(".left").stop(true).animate({width:"200px"})
$(".shouSou").html("收起");
$(".listbiao").css("display","block");
}
})
~~~
- JQuery選擇器
- 基本過濾選擇器
- 內容過濾器
- 可見性過濾器
- is篩選
- 屬性選擇器
- DOM查找
- JQuery 獨有選擇器(馬士兵)
- JQ操作CSS屬性常用寫法
- attr("")獲取標簽屬性值
- html方法與val方法操作表單文本
- 動畫特效
- 添加與刪除類名addClass()與removeClass()
- 查詢索引與遍歷index() each()
- 選擇獲取父級元素parent()
- 函數上下文$(this)
- 選擇器獲取兄弟級別元素siblings()
- 選擇器獲取子集元素children()
- animate 動畫函數
- animate 動畫函數解決積累問題stop(true)
- 獲取節點數據的width與height方法
- next()獲取匹配節點的下一個節點
- nextAll()獲取到匹配的節點,后面全部的姊妹節點
- prev()方法獲取某一個節點的前一個姐妹元素
- prevALL()方法獲取某一個節點的前所有的姐妹元素
- jquery中文官方網站