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

 
  
 
 
強震摧毀加勒比海小國海地
 
 
今年，戰爭、經濟動蕩和自然災害席卷全球，制造了無數的傷痛；但是，在痛苦的同時仍有明亮的瞬間存在。
 
 
查看詳情
 
 

我們用一個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動畫。

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com