基礎(chǔ)中動(dòng)畫效果

北風(fēng)網(wǎng)項(xiàng)目培訓(xùn)第17講：詳解jQuery的動(dòng)畫效果

講師：風(fēng)舞煙JavaScript-JQuery系列全程精通+圖書館管理系統(tǒng)實(shí)戰(zhàn)講座內(nèi)容利用jQuery實(shí)現(xiàn)特效利用jQuery實(shí)現(xiàn)特效基本動(dòng)畫jQuery中的滑動(dòng)jQuery中淡入淡出效果jQuery中的自定義動(dòng)畫5.1:基本動(dòng)畫show()顯示隱藏的匹配元素。這個(gè)就是'show(speed,[callback])'無動(dòng)畫的版本。如果選擇的元素是可見的，這個(gè)方法將不會(huì)改變?nèi)魏螙|西。無論這個(gè)元素是通過hide()方法隱藏的還是在CSS里設(shè)置了display:none;，這個(gè)方法都將有效。返回值jQuery示例顯示所有段落HTML代碼:<pstyle="display:none">Hello</p>jQuery代碼:$("p").show()show(speed,[callback])以優(yōu)雅的動(dòng)畫顯示所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)?？梢愿鶕?jù)指定的速度動(dòng)態(tài)地改變每個(gè)匹配元素的高度、寬度和不透明度。返回值jQuery參數(shù)speed(String,Number):三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback(Function):(Optional)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。示例用緩慢的動(dòng)畫將隱藏的段落顯示出來，歷時(shí)600毫秒。HTML代碼:<pstyle="display:none">Hello</p>jQuery代碼:$("p").show("slow");用迅速的動(dòng)畫將隱藏的段落顯示出來，歷時(shí)200毫秒。并在之后執(zhí)行反饋！HTML代碼:<pstyle="display:none">Hello</p>jQuery代碼:$("p").show("fast",function(){

$(this).text("AnimationDone!");

});將隱藏的段落用將近4秒的時(shí)間顯示出來。。。并在之后執(zhí)行一個(gè)反饋。。。HTML代碼:<pstyle="display:none">Hello</p>jQuery代碼:$("p").show(4000,function(){

$(this).text("AnimationDone...");

});hide()隱藏顯示的元素這個(gè)就是'hide(speed,[callback])'的無動(dòng)畫版。如果選擇的元素是隱藏的，這個(gè)方法將不會(huì)改變?nèi)魏螙|西。返回值jQuery示例隱藏所有段落jQuery代碼:$("p").hide()hide(speed,[callback])以優(yōu)雅的動(dòng)畫隱藏所有匹配的元素，并在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)?？梢愿鶕?jù)指定的速度動(dòng)態(tài)地改變每個(gè)匹配元素的高度、寬度和不透明度。返回值jQuery參數(shù)speed(String,Number):三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback(FunctionFunction):(Optional)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。示例用600毫秒的時(shí)間將段落緩慢的隱藏jQuery代碼:$("p").hide("slow");用200毫秒將段落迅速隱藏，之后彈出一個(gè)對(duì)話框。jQuery代碼:$("p").hide("fast",function(){

alert("AnimationDone.");

});toggle()切換元素的可見狀態(tài)。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。返回值jQuery示例切換所有段落的可見狀態(tài)。HTML代碼:<p>Hello</p><pstyle="display:none">HelloAgain</p>jQuery代碼:$("p").toggle()結(jié)果:<ptyle="display:none">Hello</p><pstyle="display:block">HelloAgain</p>5.2:jQuery中的滑動(dòng)slideDown(speed,[callback])通過高度變化（向下增大）來動(dòng)態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式顯示出來。返回值jQuery參數(shù)speed(String,Number):三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback(FunctionFunction):(可選)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)示例用600毫秒緩慢的將段落滑下jQuery代碼:$("p").slideDown("slow");用200毫秒快速將段落滑下，之后彈出一個(gè)對(duì)話框<pstyle="display:none;width:200px;height:200px;background-color:Red;">Hello</p>jQuery代碼:$("p").slideDown("fast",function(){

alert("AnimationDone.");

});slideUp(speed,[callback])通過高度變化（向上減?。﹣韯?dòng)態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式隱藏起來。返回值jQuery參數(shù)speed(String,Number):三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback(Function):(可選)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)示例用600毫秒緩慢的將段落滑上jQuery代碼:$("p").slideUp("slow");用200毫秒快速將段落滑上，之后彈出一個(gè)對(duì)話框jQuery代碼:$("p").slideUp("fast",function(){

alert("AnimationDone.");

});slideToggle(speed,[callback])通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式隱藏或顯示。返回值jQuery參數(shù)speed(String,Number):三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback(Function):(可選)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)示例用600毫秒緩慢的將段落滑上或滑下jQuery代碼:$("p").slideToggle("slow");用200毫秒快速將段落滑上或滑下，之后彈出一個(gè)對(duì)話框jQuery代碼:$("p").slideToggle("fast",function(){

alert("AnimationDone.");

});5.3：jQuery中淡入淡出效果fadeIn(speed,[callback])通過不透明度的變化來實(shí)現(xiàn)所有匹配元素的淡入效果，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。返回值jQuery參數(shù)speed(String,Number):三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback(Function):(Optional)(可選)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)示例用600毫秒緩慢的將段落淡入jQuery代碼:$("p").fadeIn("slow");用200毫秒快速將段落淡入，之后彈出一個(gè)對(duì)話框jQuery代碼:$("p").fadeIn("fast",function(){

alert("AnimationDone.");

});fadeOut(speed,[callback])通過不透明度的變化來實(shí)現(xiàn)所有匹配元素的淡出效果，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。返回值jQuery參數(shù)speed(String,Number):三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback(Function):(可選)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)示例用600毫秒緩慢的將段落淡出jQuery代碼:$("p").fadeOut("slow");用200毫秒快速將段落淡出，之后彈出一個(gè)對(duì)話框jQuery代碼:$("p").fadeOut("fast",function(){

alert("AnimationDone.");

});fadeTo(speed,opacity,[callback])把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。返回值jQuery參數(shù)speed(String,Number):三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)opacity(Number):要調(diào)整到的不透明度值(0到1之間的數(shù)字).callback(Function):(可選)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)示例用600毫秒緩慢的將段落的透明度調(diào)整到0.66，大約2/3的可見度jQuery代碼:$("p").fadeTo("slow",0.66);用200毫秒快速將段落的透明度調(diào)整到0.25，大約1/4的可見度，之后彈出一個(gè)對(duì)話框jQuery代碼:$("p").fadeTo("fast",0.25,function(){

alert("AnimationDone.");

});5.4：jQuery中的自定義動(dòng)畫animate(params[,duration[,easing[,callback]]])用于創(chuàng)建自定義動(dòng)畫的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫形式。在jQuery1.2中，你可以使用em和%單位。另外，在jQuery1.2中，你可以通過在屬性值前面指定"+="或"-="來讓元素做相對(duì)運(yùn)動(dòng)。返回值jQuery參數(shù)params(Options):一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合duration(String,Number):(可選)三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)callback(Function):(可選)在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)示例1點(diǎn)擊按鈕后div元素的幾個(gè)不同屬性一同變化HTML代碼:<buttonid="go">Run</button>

<divid="block">Hello!</div>jQuery代碼://在一個(gè)動(dòng)畫中同時(shí)應(yīng)用三種類型的效果

$("#go").click(function(){

$("#block").animate({

width:"90%",

height:"100%",

fontSize:"10em",

borderWidth:10

},1000);

});

讓指定元素左右移動(dòng)HTML代碼:<pstyle="display:none;left:20px;top:20px;position:absolute;width:200px;height:200px;background-color:Red;border-style:solid;border-width:1px;border-color:Black;">Hello</p>jQuery代碼:$("#right").click(function(){

$(“p").animate({left:'+50px'},"slow");

});

$("#left").click(function(){

$(“p").animate({left:'-50px'},"slow");

});在600毫秒內(nèi)切換段落的高度和透明度jQuery代碼:$("p").animate({

height:'toggle',opacity:'toggle'

},"slow");用500毫秒將段落移到left為50的地方并且完全清晰顯示出來（透明度為1）jQuery代碼:$("p").animate({

left:50,opacity:'show'

},500);animate(params,options)用于創(chuàng)建自定義動(dòng)畫的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫形式。在jQuery1.2中，你可以使用em和%單位。另外，在jQuery1.2中，你可以通過在屬性值前面指定"+="或"-="來讓元素做相對(duì)運(yùn)動(dòng)。返回值jQuery參數(shù)params(Options):一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合options(Options):一組包含動(dòng)畫選項(xiàng)的值的集合。選項(xiàng)duration(String,Number):(默認(rèn)值:"normal")三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)complete(Function):在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)step(Callback):queue(Boolean):(默認(rèn)值:true)設(shè)定為false將使此動(dòng)畫不進(jìn)入動(dòng)畫隊(duì)列(jQuery1.2中新增)示例第一個(gè)按鈕按了之后展示了不在隊(duì)列中的動(dòng)畫。在div擴(kuò)展到90%的同時(shí)也在增加字體，一旦字體改變完畢后，邊框的動(dòng)畫才開始。第二個(gè)按鈕按了之后就是一個(gè)傳統(tǒng)的鏈?zhǔn)絼?dòng)畫，即等前一個(gè)動(dòng)畫完成后，后一個(gè)動(dòng)畫才會(huì)開始.HTML代碼:<buttonid="go1">?AnimateBlock1</button>

<buttonid="go2">?AnimateBlock2</button>

<divid="block1">Block1</div><divid="block2">Block2</div>jQuery代碼:$("#go1").click(function(){

$("#block1").animate({width:"90%"},{queue:false,duration:5000})

.animate({fontSize:'10em'},1000)

.anima