jQuery的animate函數(shù)實(shí)現(xiàn)圖文切換動(dòng)畫(huà)效果
在一些圖片網(wǎng)站上我們可以看到在展示圖片的時(shí)候,用鼠標(biāo)輕輕滑上圖片可以看到該圖片的文字介紹信息,其實(shí)用jQuery的animate函數(shù)就可以實(shí)現(xiàn)這樣一個(gè)動(dòng)畫(huà)過(guò)程。
<div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>強(qiáng)震摧毀加勒比海小國(guó)海地</h3> <p>今年,戰(zhàn)爭(zhēng)、經(jīng)濟(jì)動(dòng)蕩和自然災(zāi)害席卷全球,制造了無(wú)數(shù)的傷痛;但是,在痛苦的同時(shí)仍有明亮的瞬間存在。</p> <p><a href="#">查看詳情</a></p> </div> </div>
我們用一個(gè)DIV.wrap放置一張圖片,以及一個(gè)需要覆蓋的div.cover,cover里面放置圖片的介紹信息,支持任意標(biāo)準(zhǔn)的html內(nèi)容。然后將上述代碼復(fù)制多個(gè),排列成一組圖片。
CSS
我們需要用CSS將.wrap排成行,并且要將.cover覆蓋層隱藏一部分,當(dāng)鼠標(biāo)滑上去是通過(guò)調(diào)用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; }
值得注意的是,隱藏.cover一部分使用了position:absolute絕對(duì)定位,將覆蓋層.cover只顯示標(biāo)題部分,只需設(shè)置top:170px,因?yàn)檫@個(gè).wrap的高度是200px,而標(biāo)題h3的高度為30px,相減得之。
jQuery
首先我將覆蓋層的透明度設(shè)置為0.8,然后當(dāng)鼠標(biāo)滑上圖片時(shí),使用hover函數(shù)來(lái)調(diào)用animate動(dòng)畫(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用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性(如“height”、“top”或“opacity”)。而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫(huà)結(jié)束。如果是一個(gè)數(shù)值,樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值,則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫(huà)形式。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡、
- jQuery中animate的幾種用法與注意事項(xiàng)
- jQuery animate easing使用方法圖文詳解
- jQuery中使用animate自定義動(dòng)畫(huà)的方法
- 深入理解jquery自定義動(dòng)畫(huà)animate()
- 分享有關(guān)jQuery中animate、slide、fade等動(dòng)畫(huà)的連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的bug
- 基于jquery animate操作css樣式屬性小結(jié)
- jQuery插件animateSlide制作多點(diǎn)滑動(dòng)幻燈片
- jQuery中animate動(dòng)畫(huà)第二次點(diǎn)擊事件沒(méi)反應(yīng)
- js實(shí)現(xiàn)類(lèi)似jquery里animate動(dòng)畫(huà)效果的方法
- jquery使用animate方法實(shí)現(xiàn)控制元素移動(dòng)
- jQuery實(shí)現(xiàn)立體式數(shù)字動(dòng)態(tài)增加(animate方法)
相關(guān)文章
從jquery的過(guò)濾器.filter()方法想到的
.filter()方法可以接受一個(gè)函數(shù)作為參數(shù),然后根據(jù)函數(shù)的返回值判斷,這就是jquery選擇器的過(guò)濾器,下面有個(gè)不錯(cuò)的示例,大家可以參考下2013-09-09Jquery1.9.1源碼分析系列(六)延時(shí)對(duì)象應(yīng)用之jQuery.ready
這篇文章主要介紹了Jquery1.9.1源碼分析系列(六)延時(shí)對(duì)象應(yīng)用之jQuery.ready的相關(guān)資料,需要的朋友可以參考下2015-11-11jQuery Pagination分頁(yè)插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery Pagination分頁(yè)插件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery插件FusionCharts實(shí)現(xiàn)的2D面積圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的2D面積圖效果,結(jié)合完整實(shí)例形式分析了FusionCharts繪制2D面積圖的完整步驟與相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery進(jìn)行組件開(kāi)發(fā)完整實(shí)例
這篇文章主要介紹了jQuery進(jìn)行組件開(kāi)發(fā)的方法,以完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)自定義組件的相關(guān)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2015-12-12jQuery實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中數(shù)量
這里給大家分享一段jQuery實(shí)現(xiàn)的統(tǒng)計(jì)復(fù)選框選中數(shù)量的代碼,非常的實(shí)用,有需要的小伙伴們請(qǐng)帶走!2014-11-11