在一些(xiē)圖片網站(zhàn)上(shàng)我們可(kě)以看到在展示圖片的時(shí)候，用鼠标輕輕滑上(shàng)圖片可(kě)以看到該圖片的文字介紹信息，其實用jQuery的animate函數(shù)就可(kě)以實現這樣一個(gè)動畫(huà)過程。

XHTML

	 
	

		
		

			強震摧毀加勒比海小(xiǎo)國海地
		

		

			今年，戰争、經濟動蕩和(hé)自然災害席卷全球，制(zhì)造了無數(shù)的傷痛；但(dàn)是，在痛苦的同時(shí)仍有(yǒu)明(míng)亮的瞬間(jiān)存在。
		

		

			查看詳情
		

	

我們用一個(gè)DIV.wrap放置一張圖片，以及一個(gè)需要覆蓋的div.cover，cover裏面放置圖片的介紹信息，支持任意标準的html內(nèi)容。然後将上(shàng)述代碼複制(zhì)多(duō)個(gè)，排列成一組圖片。

CSS

我們需要用CSS将.wrap排成行(xíng)，并且要将.cover覆蓋層隐藏一部分，當鼠标滑上(shàng)去是通(tōng)過調用jquery才顯示出來(lái)。

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; 
background:#e8f5fe; overflow:hidden;}
.wrap img{position:absolute; top:0; left:0}
.wrap h3{line-height:30px; font-size:14px; color:#fff}
.wrap p{line-height:20px}
.cover{position:absolute; background:#000; height:120px; width:100%; 
padding:3px; top:170px; }

值得(de)注意的是，隐藏.cover一部分使用了position:absolute絕對定位，将覆蓋層.cover隻顯示标題部分，隻需設置top:170px，因為(wèi)這個(gè).wrap的高(gāo)度是200px，而标題h3的高(gāo)度為(wèi)30px，相減得(de)之。

jQuery

首先我将覆蓋層的透明(míng)度設置為(wèi)0.8，然後當鼠标滑上(shàng)圖片時(shí)，使用hover函數(shù)來(lái)調用animate動畫(huà)。

$(function(){
	$(".cover").css("opacity",.8);
	$(".wrap").hover(function(){
		$(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160});
	},function(){
		$(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160});
	});
});

animate函數(shù)是jQuery用于創建自定義動畫(huà)的函數(shù)。這個(gè)函數(shù)的關鍵在于指定動畫(huà)形式及結果樣式屬性對象。這個(gè)對象中每個(gè)屬性都表示一個(gè)可(kě)以變化的樣式屬性（如“height”、“top”或“opacity”）。而每個(gè)屬性的值表示這個(gè)樣式屬性到多(duō)少(shǎo)時(shí)動畫(huà)結束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為(wèi)該屬性調用默認的動畫(huà)形式。

好了，大(dà)功告成，去看下演示DEMO吧(ba)。