最近在學習JQ動畫，收集一些JQ動畫的一些基礎知識跟大家分享下！
加載DOM執行
$(document).ready(function(){})
簡寫：
$(function(){})
4.1.2 事件綁定
在文檔加載完成后，為元素綁定事件
bind(type[,data],fn)
type: 事件類型： 包括blur,focus,click等
第2個可選參數 作為event.data屬性傳遞給事件對象的額外數據對象
eg
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
第3個參數為綁定的處理函數
4.1.3 合成事件
hover(enter,leave) 用於模擬光標懸停的事件
當光標移動到元素上，觸發第一個函數，移出觸發第二個函數
$(function(){
$("#panel h5.head").hover(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide()});
});
hover() 替代了JQ中的 bind("mouseenter") 和 bind("mouseleave")
2 toggle() 方法
toggle(fn1,fn2,...fnN) 鼠標連續單擊事件
$("#panel h5.head").toggle(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide();}
toggle() 切換元素的可見狀態
4.1.4 事件冒泡
單擊元素內部的click事件，外部層次的事件也執行
<span><div><body>
事件按照dom的層次結構向上直至頂端
事件對象:
$("element").bind("click",function(event){}//單擊時，event事件對象被創建，該對象只有事件處理函數能訪問，函數執行完畢，對象就被銷毀。
停止冒泡事件 stopPropagation()
在處理函數內部末尾添加
event.stopPropagation(); // 停止事件冒泡
阻止元素默認行為 preventDefault()
eg: 阻止表單的提交
bind("click",function(event){event.preventDefault();//阻止默認行為})
stopPropagation() preventDefault() 都可以用return false;替換，return false 包括兩個方面
事件捕獲，反向冒泡
JQ 不支持，直接用javascript
4.1.5 事件對象的屬性
(1) event.type() 獲取到事件的類型
(2)event.stopPropagation()
(3)event.preventDefault()
(4)event.target()//獲取到觸發事件的元素
event.target.href//獲取到href屬性值
(5)event.relatedTarget()
mouseover 和mouseout 所發生的相關元素通過event.relatedTarget() 來訪問
(6)event.PageX()和 event.PageY() 獲得光標相對於頁面的x坐標和y坐標
(7)event.which() 鼠標單擊事件中獲取到鼠標的左、中、右鍵，在鍵盤事件獲取鍵盤按鍵
e.which// 1 鼠標左鍵，2鼠標中建，3鼠標右鍵
(8) event.metaKey() //獲取鍵盤事件的<crtl>按鍵
(9)event.originalEvent()方法 指向原始的事件對象
4.1.6 移除事件
unbind()
("#btn").unbind("click");
("#btn").unbind();
unbind([type][,data]);
第一個參數是事件類型，第二個參數是要移除的函數
如果沒有參數，則移除所有綁定的函事件
提供了事件類型，只刪除該類型的綁定事件
如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數被刪除.
One() 方法。為元素綁定事件，只執行一次，事件處理函數被觸發后，則刪除事件
使用方法跟 bind() 相同
4.1.7 模擬操作
模擬用戶操作，來達到效果。例如在用戶進入頁面后，觸發click事件
trigger()
$("#btn").trigger("click");
還能觸發自定義事件
$("#btn").bind("myclick",function(){});
$("#btn").trigger("myclick");
傳遞數據
tigger(type[,data])
觸發的事件類型；傳遞給事件處理函數的附加數據。以數組形式。
$("#btn").bind("myclick",function(event,message1,message2){$("#test").append("<p>"+message1+message2+"</p>")});
$("#btn").trigger("myclick",["我的自定義","事件 "]);
觸發事件后還會執行瀏覽器的的默認操作。
若不執行默認操作則用 triggerHandler()
4.1.8 其他用法
1.綁定多個事件類型
$(function(){
$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");})
})
2. 添加事件命名空間，便於管理
$(function(){
$("div").bind("click.plugin",function(){});
$("div").bind("mouseover.plugin",function(){});
#("button").click(function(){$("div").unbind(".plugin")});// 通過命名空間來刪除綁定的事件
});
3.相同事件名稱，不同命名空間執行方法
$("div").bind("click.plugin",function(){});
$("div").bind("click",function(){});
#("button").click(function(){$("div").trigger("click!")}) //! 的作用是匹配所有不在命名空間里的事件
4.2 Jquery的動畫
4.2.1 show()方法 和hide()方法
1. 隱藏和顯示
$("element").hide() == element.css("display","none");
2.元素動態隱藏和顯示
$("element").hide(1000) // 在1000毫秒內隱藏，即1秒
也可以用"slow" 600 "normal" 400 "fast" 200
4.2.2 fadeIn() fadeOut()
fadeOut() 在一段時間內降低元素的不透明度，直至元素完全消失
fadeIn() 相反
4.2.3 slideUp() 和slideDown()
slideDown() 講display為none的元素從上向下延伸顯示
4.2.4 自定義動畫方法
animate()
要影響到元素的top left bottom ，right屬性，必須先把元素的position設置為relative或者absolute。
$("#panel").click(function(){$(this).animate({left:"500px"},3000)});
2.累加累減動畫
$(this).animate({left:"+=500px"},3000)
3.多重動畫
$(this).animate({left:"+=500px",height:"300px"},3000)
4.按順序執行多個動畫
$(this).animate({left:"500px"},3000)；
$(this).animate({height:"500px"},3000) 動畫的效果具有先后順序，稱為動畫隊列
4.2.5 動畫回調函數
$(this).animate().animate({},3000,function(){$(this).css("border","5px solid blue")})通過動畫回調函數將css方法添加到動畫隊列當中
回調函數適用於所有的動畫效果
4.2.6 停止動畫和判斷是否處於動畫狀態
stop([clerrQueue][,gotoend]) boolean 值可選參數
第一個參數： 是否清空未執行完的動畫隊列
第二個參數： 是否直接將在執行的動畫跳轉到末狀態
不帶參數的stop 只會停止正在進行的動畫
2，判斷元素是否處於動畫狀態
if(!$( element).is(":animated"))
4.2.7 其他動畫方法
toggle(speed,[callback]) 切換元素的可見狀態
slideToggle(speed,[callback]) 通過高度變化切換元素的可見性
fadeTo(speed,opacity,[callback]) 元素的不透明度調整到指定的值
$(document).ready(function(){})
簡寫：
$(function(){})
4.1.2 事件綁定
在文檔加載完成后，為元素綁定事件
bind(type[,data],fn)
type: 事件類型： 包括blur,focus,click等
第2個可選參數 作為event.data屬性傳遞給事件對象的額外數據對象
eg
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
第3個參數為綁定的處理函數
4.1.3 合成事件
hover(enter,leave) 用於模擬光標懸停的事件
當光標移動到元素上，觸發第一個函數，移出觸發第二個函數
$(function(){
$("#panel h5.head").hover(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide()});
});
hover() 替代了JQ中的 bind("mouseenter") 和 bind("mouseleave")
2 toggle() 方法
toggle(fn1,fn2,...fnN) 鼠標連續單擊事件
$("#panel h5.head").toggle(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide();}
toggle() 切換元素的可見狀態
4.1.4 事件冒泡
單擊元素內部的click事件，外部層次的事件也執行
<span><div><body>
事件按照dom的層次結構向上直至頂端
事件對象:
$("element").bind("click",function(event){}//單擊時，event事件對象被創建，該對象只有事件處理函數能訪問，函數執行完畢，對象就被銷毀。
停止冒泡事件 stopPropagation()
在處理函數內部末尾添加
event.stopPropagation(); // 停止事件冒泡
阻止元素默認行為 preventDefault()
eg: 阻止表單的提交
bind("click",function(event){event.preventDefault();//阻止默認行為})
stopPropagation() preventDefault() 都可以用return false;替換，return false 包括兩個方面
事件捕獲，反向冒泡
JQ 不支持，直接用javascript
4.1.5 事件對象的屬性
(1) event.type() 獲取到事件的類型
(2)event.stopPropagation()
(3)event.preventDefault()
(4)event.target()//獲取到觸發事件的元素
event.target.href//獲取到href屬性值
(5)event.relatedTarget()
mouseover 和mouseout 所發生的相關元素通過event.relatedTarget() 來訪問
(6)event.PageX()和 event.PageY() 獲得光標相對於頁面的x坐標和y坐標
(7)event.which() 鼠標單擊事件中獲取到鼠標的左、中、右鍵，在鍵盤事件獲取鍵盤按鍵
e.which// 1 鼠標左鍵，2鼠標中建，3鼠標右鍵
(8) event.metaKey() //獲取鍵盤事件的<crtl>按鍵
(9)event.originalEvent()方法 指向原始的事件對象
4.1.6 移除事件
unbind()
("#btn").unbind("click");
("#btn").unbind();
unbind([type][,data]);
第一個參數是事件類型，第二個參數是要移除的函數
如果沒有參數，則移除所有綁定的函事件
提供了事件類型，只刪除該類型的綁定事件
如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數被刪除.
One() 方法。為元素綁定事件，只執行一次，事件處理函數被觸發后，則刪除事件
使用方法跟 bind() 相同
4.1.7 模擬操作
模擬用戶操作，來達到效果。例如在用戶進入頁面后，觸發click事件
trigger()
$("#btn").trigger("click");
還能觸發自定義事件
$("#btn").bind("myclick",function(){});
$("#btn").trigger("myclick");
傳遞數據
tigger(type[,data])
觸發的事件類型；傳遞給事件處理函數的附加數據。以數組形式。
$("#btn").bind("myclick",function(event,message1,message2){$("#test").append("<p>"+message1+message2+"</p>")});
$("#btn").trigger("myclick",["我的自定義","事件 "]);
觸發事件后還會執行瀏覽器的的默認操作。
若不執行默認操作則用 triggerHandler()
4.1.8 其他用法
1.綁定多個事件類型
$(function(){
$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");})
})
2. 添加事件命名空間，便於管理
$(function(){
$("div").bind("click.plugin",function(){});
$("div").bind("mouseover.plugin",function(){});
#("button").click(function(){$("div").unbind(".plugin")});// 通過命名空間來刪除綁定的事件
});
3.相同事件名稱，不同命名空間執行方法
$("div").bind("click.plugin",function(){});
$("div").bind("click",function(){});
#("button").click(function(){$("div").trigger("click!")}) //! 的作用是匹配所有不在命名空間里的事件
4.2 Jquery的動畫
4.2.1 show()方法 和hide()方法
1. 隱藏和顯示
$("element").hide() == element.css("display","none");
2.元素動態隱藏和顯示
$("element").hide(1000) // 在1000毫秒內隱藏，即1秒
也可以用"slow" 600 "normal" 400 "fast" 200
4.2.2 fadeIn() fadeOut()
fadeOut() 在一段時間內降低元素的不透明度，直至元素完全消失
fadeIn() 相反
4.2.3 slideUp() 和slideDown()
slideDown() 講display為none的元素從上向下延伸顯示
4.2.4 自定義動畫方法
animate()
要影響到元素的top left bottom ，right屬性，必須先把元素的position設置為relative或者absolute。
$("#panel").click(function(){$(this).animate({left:"500px"},3000)});
2.累加累減動畫
$(this).animate({left:"+=500px"},3000)
3.多重動畫
$(this).animate({left:"+=500px",height:"300px"},3000)
4.按順序執行多個動畫
$(this).animate({left:"500px"},3000)；
$(this).animate({height:"500px"},3000) 動畫的效果具有先后順序，稱為動畫隊列
4.2.5 動畫回調函數
$(this).animate().animate({},3000,function(){$(this).css("border","5px solid blue")})通過動畫回調函數將css方法添加到動畫隊列當中
回調函數適用於所有的動畫效果
4.2.6 停止動畫和判斷是否處於動畫狀態
stop([clerrQueue][,gotoend]) boolean 值可選參數
第一個參數： 是否清空未執行完的動畫隊列
第二個參數： 是否直接將在執行的動畫跳轉到末狀態
不帶參數的stop 只會停止正在進行的動畫
2，判斷元素是否處於動畫狀態
if(!$( element).is(":animated"))
4.2.7 其他動畫方法
toggle(speed,[callback]) 切換元素的可見狀態
slideToggle(speed,[callback]) 通過高度變化切換元素的可見性
fadeTo(speed,opacity,[callback]) 元素的不透明度調整到指定的值