一鹏倘,.hide()和.show()
.hide([duration ] [,easing ] [,complete ])
.hide(隱藏完這個過程執(zhí)行的時間 ,隱藏的方式, 完成隱藏后執(zhí)行的函數(shù))
1揍鸟, duration:動畫持續(xù)多久
2获列,easing:表示過渡使用哪種緩動函數(shù),jQuery自身提供"linear" 和 "swing"
3案站,complete:在動畫完成時執(zhí)行的函數(shù)
比起display的設(shè)置,優(yōu)點:
1,這種隱藏展示闪朱,可以設(shè)置一些效果
2,不會改變DOM節(jié)點元素的display值(如果dom節(jié)點原本display為inline或inline-block,那么設(shè)置display來達(dá)到隱藏展示會改變節(jié)點本身的display屬性)
.toggle( [duration ] [, easing ] [, complete ] )
用來切換元素的隱藏钻洒、顯示
$("button").on("click",function(){
$("p").toggle()
})
單擊按鈕奋姿,如果p本來顯示在頁面上,那么隱藏素标,否則相反
使用show和hide實現(xiàn)toggle的功能
方法一(設(shè)置狀態(tài)):
var isshow=1;
$("button").on("click",function(){
if(isshow===1){
$("p").hide();
isshow=0;
}else{
$("p").show();
isshow=1;
}
});
方法二(判斷display是不是none)
var $p=$("p");
$("button").on("click",function(){
if($p.css("display")==="none"){
$p.show();
}else{
$p.hide();
}
});
二称诗,漸變(透明度的變化)
.fadeIn( [duration ] [, easing ] [, complete ] )
通過淡入的方式顯示匹配元素,參數(shù)含義和上面相同
.fadeOut( [duration ] [, easing ] [, complete ] )
通過淡出的方式隱藏匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ] )
到達(dá)指定透明度就不變了
調(diào)整匹配元素的透明度头遭,方法通過匹配元素的不透明度做動畫效果
.fadeToggle( [duration ] [, easing ] [, complete ] )
切換淡入淡出
通過匹配的元素的不透明度動畫寓免,來顯示或隱藏它們,方法執(zhí)行匹配元素的不透明度動畫任岸。當(dāng)被可見元素調(diào)用時再榄,元素不透明度一旦達(dá)到0,display樣式屬性設(shè)置為none 享潜,所以元素不再影響頁面的布局困鸥。
代碼例子
三,滑動
.slideDown( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示一個匹配元素剑按,方法將給匹配元素的高度的動畫
.slideUp( [duration ] [, easing ] [, complete ] )
用滑動動畫隱藏一個匹配元素疾就,方法將給匹配元素的高度的動畫
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示或隱藏一個匹配元素,方法將給匹配元素的高度的動畫
代碼效果1
代碼效果2
四艺蝴,自定義動畫
.animate( properties [, duration ] [, easing ] [, complete ] )
設(shè)置某個元素終極狀態(tài)的效果猬腰,和整個過程執(zhí)行的時間
這是一個異步的動畫,如果函數(shù)放到animate的后面猜敢,那么動畫和函數(shù)一一起執(zhí)行的(異步)姑荷,如果函數(shù)放到animate的最后一個參數(shù)作為回調(diào)函數(shù),那么這個函數(shù)在動畫執(zhí)行完畢缩擂,再執(zhí)行函數(shù)(同步)
properties是傳入一個屬性對象{width:"10px",opcity:0.3}
效果代碼
注意:
注意:
自定義動畫不能設(shè)置背景顏色動畫
五鼠冕,停止動畫
有兩種:
1,停到當(dāng)前動畫胯盯,.stop()
2懈费,清空當(dāng)前隊列里面的所有動畫,停止所有動畫博脑,.finsh()
六憎乙,防止用戶重復(fù)點擊(類似ajax重復(fù)(正在發(fā)送又單擊一次)發(fā)送請求)
解決辦法:設(shè)置一個狀態(tài)鎖
var a=false
判斷a=false,執(zhí)行動畫票罐,正在執(zhí)行動畫(正在發(fā)送請求),a=true
動畫執(zhí)行完(客戶端得到響應(yīng))泞边,a=false
代碼示例