jquery實(shí)現(xiàn)先淡出再折疊收起的動畫效果
更新時間:2015年08月07日 09:32:16 作者:皮蛋
這篇文章主要介紹了jquery實(shí)現(xiàn)先淡出再折疊收起的動畫效果,通過jquery鏈?zhǔn)讲僮鲗?shí)現(xiàn)頁面元素的漸變折疊與展開功能,非常簡單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了jquery實(shí)現(xiàn)先淡出再折疊收起的動畫效果。分享給大家供大家參考。具體如下:
這里使用jquery實(shí)現(xiàn)先淡出再折疊形變的動畫效果,動畫折疊展開一個層,先淡出,然后Div又發(fā)生形狀的改變,整體不錯哦。
運(yùn)行效果截圖如下:
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery先淡出再變形的動畫</title> <style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { padding: 5px; background: #96E555; cursor: pointer } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; } </style> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#panel h5.head").toggle(function(){ $(this).next("div.content").fadeOut(); },function(){ $(this).next("div.content").fadeIn(); }) }) </script> </head> <body> <div id="panel"> <h5 class="head">jQuery動畫制作實(shí)例</h5> <div class="content"> 展示使用jQuery生成動畫效果的一個小例子,讓一個Div層先淡出然后再發(fā)生形變,最后折疊消失的特效代碼。。</div> </div> </body> </html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
您可能感興趣的文章:
- jQuery下拉菜單的實(shí)現(xiàn)代碼
- 精心挑選的15個jQuery下拉菜單制作教程
- bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果
- jQuery實(shí)現(xiàn)的checkbox級聯(lián)選擇下拉菜單效果示例
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果
- jQuery插件cxSelect多級聯(lián)動下拉菜單實(shí)例解析
- jQuery模擬select實(shí)現(xiàn)下拉菜單功能
- 基于jquery實(shí)現(xiàn)三級下拉菜單
- jQuery實(shí)現(xiàn)的頁面詳情展開收起功能示例
- jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
- jQuery實(shí)現(xiàn)下拉菜單動態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能
相關(guān)文章
jquery-file-upload 文件上傳帶進(jìn)度條效果
這篇文章主要介紹了jquery-file-upload 文件上傳帶進(jìn)度條效果,代碼分為html部分css部分和js部分,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-11-11jQuery彈出窗口打開鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery彈出窗口打開鏈接的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12寫得不錯的jquery table鼠標(biāo)經(jīng)過變色代碼
鼠標(biāo)經(jīng)過table變色的效果,想必大家都有遇到過吧,其實(shí)實(shí)現(xiàn)并不難,在本文為大家詳細(xì)介紹下jquery是如何實(shí)現(xiàn)的,感興趣的朋友可以參看下2013-09-09