jQuery的animate函數實現圖文切換動畫效果

jQuery的animate函數實現圖文切換動畫效果

 　　animate()在jquery中作為一個方法,可用於建立動畫效果，jquery中的animate()方法讓那個頁面增加了很好的視覺效果

　　在一些圖片網站上我們可以看到在展示圖片的時候，用滑鼠輕輕滑片可以看到該圖片的文字介紹資訊，其實用jQuery的animate函數就可以實現這樣一個動畫過程。

　　?

1 2 3 4 5 6 7 8

<div class="wrap">    <img src="images/s1.jpg" alt="photo" />    <div class="cover">      <h3>強震摧毀加勒比海小國海地</h3>      <p>今年，戰爭、經濟動蕩和自然災害席捲全球，製造了無數的傷痛；但是，在痛苦的同時仍有明亮的瞬間存在。</p>      <p><a href="#">查看詳情</a></p>    </div>  </div>

　　我們用一個DIV.wrap放置一張圖片，以及一個需要覆蓋的div.cover，cover裡面放置圖片的介紹資訊，支援任意標準的html內容。然後將上述代碼複製多個，排列成一組圖片。

　　CSS

　　我們需要用CSS將.wrap排成行，並且要將.cover覆蓋層隱藏一部分，當滑鼠滑上去是通過調用jquery才顯示出來。

　　?

1 2 3 4 5 6 7

.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; }

　　值得注意的是，隱藏.cover一部分使用了position:absolute絕對位置，將覆蓋層.cover只顯示標題部分，只需設定top:170px，因為這個.wrap的高度是200px，而標題h3的高度為30px，相減得之。

　　jQuery

　　首先我將覆蓋層的透明度設定為0.8，然後當滑鼠滑片時，使用hover函數來調用animate動畫。

　　?

1 2 3 4 5 6 7 8

$(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函數是jQuery用於建立自訂動畫的函數。這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性(如“height”、“top”或“opacity”)。而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從當前的值漸層到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字串值，則會為該屬性調用預設的動畫形式。

　　以上所述就是本文的全部內容了，希望大家能夠喜歡、