jQuery可(kě)以實現簡單的動畫(huà)效果，在本文中，當您用鼠标滑向圖片時(shí)，圖片開(kāi)始滑動，并切換成圖片的文本信息，當鼠标離開(kāi)時(shí)，圖片又還(hái)原成原樣。

XHTML

	 
	

		圖片标題
	

	

		圖片說明(míng)文字
	

	

		查看詳情
	


...

我創建了一個(gè)DIV.wrap，裏面放置了一張圖片，以及文字部分。然後在頁面中創建多(duō)個(gè)同樣的DIV.wrap，使用CSSK控制(zhì)DIV.wrap的外觀。

CSS

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; 
background:#e8f5fe; overflow:hidden; cursor:pointer;}
.wrap img{position:absolute; top:0; left:0}

設置.wrap向左浮動，并給定寬度和(hé)高(gāo)度，這個(gè)寬度和(hé)高(gāo)度正好是要展示的圖片的寬度和(hé)高(gāo)度。然後注意設置overflow:hidden，這樣的話(huà).wrap中超出的文字部分會(huì)被隐藏。

注意還(hái)要設置圖片的位置為(wèi)absolute。

jQuery

在使用jQuery之前一定要先加載jQuery庫。

$(function(){
	$(".wrap").hover(function(){
		$(this).children("img").stop().animate({
			top:"-200px"
		},500);
	},function(){
		$(this).children().stop("img").animate({
			top:"0"
		},500);
	});
});

我們使用jQuery偵聽(tīng)用戶的鼠标行(xíng)為(wèi)。當用戶鼠标滑向DIV.wrap時(shí)，告訴DIV裏的圖片向上(shàng)滑動，滑動的距離是200px正是圖片和(hé)DIV.wrap的高(gāo)度。同樣當鼠标離開(kāi)時(shí)，圖片還(hái)原。

注意：stop()是指停止所有(yǒu)的動畫(huà)。如果不知道(dào)圖片的高(gāo)度，可(kě)以使用outerHeight()獲取高(gāo)度。