RIA應(yīng)用開發(fā)：6-jQuery動畫效果

1、第六章 jQuery動畫效果回顧頁面載入事件（ready()）事件處理（bind()、 unbind()、one()）事件委派（live()、die()）事件切換（hover()、toggle()）常用事件瀏覽器事件表單事件鍵盤事件鼠標(biāo)事件學(xué)習(xí)目標(biāo)顯示與隱藏hide()、show()、toggle()淡入淡出fadeIn()、fadeOut()、fadeTo()滑動效果slideDown()、slideup()、slideToggle()自定義動畫animate()顯示元素將隱藏的元素恢復(fù)到可見狀態(tài)，可以通過CSS方法將其display屬性設(shè)置為block或inline。若要在顯示過程中添加動

2、畫效果，可以使用show方法。show(duration,callback)duration：指定動畫的持續(xù)時間callback：指定動畫完成后要調(diào)用的函數(shù)顯示元素如果調(diào)用show方法時未傳遞任何參數(shù)，則只顯示匹配的元素。如果提供了duration參數(shù)，則會從左至右增大元素的寬度、自上而下增加其高度、從0到1增大其不透明度，直至內(nèi)容完全可見。如果提供了callback參數(shù)，則在動畫完成時執(zhí)行回調(diào)函數(shù)，借此可以將不同的動畫串連起來。隱藏元素如果要隱藏一個元素，通過調(diào)用css方法將其display屬性設(shè)置為none即可。如果要在隱藏元素的過程中添加動畫效果并在動畫完成后執(zhí)行某種操作，則通過hide

3、方法來實現(xiàn)。hide(duration,callback)duration：指定動畫的持續(xù)時間callback：指定動畫完成后要調(diào)用的函數(shù)切換元素的可見性為了便于切換元素的可見性，提供了toggle()方法。toggle():切換元素的可見狀態(tài)。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。toggle(showorhide):根據(jù)參數(shù)切換元素的可見狀態(tài)(ture為可見，false為隱藏)。toggle(duration,callback) ：duration：指定動畫的持續(xù)時間；callback：指定動畫完成后要調(diào)用的函數(shù)。顯示和隱藏例：折疊菜單$(document).re

4、ady(function () /將二級菜單設(shè)置為不可見 $(.FAQlist).hide(); /單擊一級菜單觸發(fā)的事件 $(.bartitleFAQ).click(function () /將二級菜單全部設(shè)置為不可見 $(.FAQlist).hide(); /當(dāng)前一級菜單的二級菜單設(shè)置為可見 $(this).next(.FAQlist).show(fast); ) ) 淡入效果使用fadeIn方法實現(xiàn)淡入效果。方法在更改元素的display屬性的同時逐漸增大匹配元素的opacity屬性值，從0開始增加到1。fadeIn(duration,callback)duration：指定動畫的持續(xù)時

5、間callback：指定動畫完成后要調(diào)用的函數(shù)淡出效果當(dāng)隱藏元素時，可以使用fadeout方法來實現(xiàn)淡出效果。fadeOut方法在更改元素的display屬性的同時逐漸減小匹配元素的opacity屬性，從1到0。fadeOut(duration,callback)duration：指定動畫的持續(xù)時間callback：指定動畫完成后要調(diào)用的函數(shù)調(diào)整元素的透明度如果需要將匹配元素的不透明度調(diào)整到任意值，則可以使用fadeTo方法實現(xiàn)。fadeTo(duration, opacity, callback) duration：指定動畫的持續(xù)時間opacity：透明度，在01之間取值callback：指

6、定動畫完成后要調(diào)用的函數(shù)淡入淡出例：圖片幻燈效果 在圖片上單擊時，顯示下一張圖片。$(.imge).hide();$(.imge:first).fadeIn(slow);$(.imge).click( function() $(this).fadeIn(slow); var next= ($(this).next().length)?$(this).next():$(.imge:first); $(this).fadeOut(slow); next.fadeIn(slow); return false; );向下滑動對于處于隱藏狀態(tài)的元素，使用slideDown方法可以將其顯示出來，并且添加向

7、下滑動的動畫效果。slideDown(duration,callback) duration:字符串或數(shù)字，指定動畫的持續(xù)時間callback：指定動畫完成后要調(diào)用的函數(shù)向上滑動對于頁面中的可見元素，可以使用slideup方法將匹配的元素隱藏起來并在隱藏過程中添加向上滑動效果。slideUp(duration,callback) duration:字符串或數(shù)字，指定動畫的持續(xù)時間callback：指定動畫完成后要調(diào)用的函數(shù)切換滑動如果要在下滑顯示和上滑隱藏兩種動畫效果之間進(jìn)行切換，可以通過slideToggle方法來實現(xiàn)。slideToggle(duration,callback) durat

8、ion:字符串或數(shù)字，指定動畫的持續(xù)時間callback：指定動畫完成后要調(diào)用的函數(shù)滑動效果例：導(dǎo)航效果$(#navigation ul li:has(ul).hover(function() $(this).children(ul).slideDown(400); ,function() $(this).children(ul).slideUp(fast););自定義動畫show()和hide()同時修改元素的高度、寬度和不透明度；fadeIn()和fadeout()僅修改不透明度；slideDown()和slideup()僅修改高度。animate()方法用于改變匹配元素的一組CSS屬性，

9、并生成自定義動畫效果。animate(properties, duration, easing, callback) properties：包含css樣式屬性及其目標(biāo)值的映射duration:字符串或數(shù)字，指定動畫的持續(xù)時間easing：指定過渡效果使用的緩動函數(shù)callback：指定動畫完成后要調(diào)用的函數(shù)自定義動畫animate(properties, options) 自定義動畫例：水平滾動圖片，鼠標(biāo)懸停時停止?jié)L動。var $wrapper=$(#images a img);$wrapper.css(left:0);var animator=function(imgblock) imgbl

10、ock.animate( left:-800,8000,function() imgblock.css(left:450); animator($(this); ); animator($wrapper); $wrapper.hover(function()$wrapper.stop();, function() animator($wrapper););自定義動畫例： var len = $(.num li).length; var index = 0; var adTimer; $(.num li).mouseover(function()index = $(.num li).index(this);showImg(index); ).eq(0).mouseover(); ) function showImg(index) var adHeight = $(.ad).height();$(.slider).stop(true,false).animate(top : -adHeight*index,1000);$(