久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

20
2023/10

利用jq和陰影做出消失效果

發(fā)布時(shí)間:2023-10-20 17:46:09
發(fā)布者:匡扶漢室
瀏覽量:
0

  需求如下:

     利用jq和陰影做出消失效果 (5).png

  實(shí)現(xiàn)效果要求鼠標(biāo)通過不同的標(biāo)題時(shí),根據(jù)索引值呈現(xiàn)不同的下拉條內(nèi)容,如果大家會(huì)自己寫動(dòng)畫的話,實(shí)現(xiàn)效果肯定比使用jq好很多,而且更加靈活。

  這里我們先看一下結(jié)構(gòu)。parasitism被隱藏。我們這里需要給parasitism一個(gè)下方10px模糊度為10的灰色陰影

 利用jq和陰影做出消失效果

利用jq和陰影做出消失效果

 

  我們引入jQuery,鼠標(biāo)放到導(dǎo)航條上可以使用mouseover與mouseout或者h(yuǎn)over來實(shí)現(xiàn),我這邊為了方便使用了hover,jq還有一個(gè)方法,能夠顯示隱藏的盒子并用滑動(dòng)的動(dòng)畫來展示。slideDown與slideUp能夠滑動(dòng)展示和滑動(dòng)隱藏,設(shè)置好從開始到結(jié)束的時(shí)間。

  如果我們頻繁的切換標(biāo)題,js會(huì)頻繁地按照順序觸發(fā)slideUp函數(shù),所以當(dāng)我們移出div時(shí),我們需要用stop函數(shù)立刻停止掉未完成slideUp動(dòng)畫并給一個(gè)新的slideUp動(dòng)畫,確保關(guān)閉動(dòng)畫最新且唯一。

 

利用jq和陰影做出消失效果

  利用了縮回和展示的一個(gè)時(shí)間差,再上一個(gè)下拉頁面沒有完全縮回的時(shí)候,展示下一個(gè)子頁面,借助陰影,我們可以實(shí)現(xiàn)一個(gè)簡單的消失的效果。

利用jq和陰影做出消失效果

 

 


關(guān)鍵詞:
返回列表