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

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

<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才顯示出來。

.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動畫。

$(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」這樣的字串值，則會為該屬性呼叫預設的動畫形式。

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