JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例
本文實(shí)例講述了JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作。分享給大家供大家參考,具體如下:
JQuery的特殊效果
fadeOut()淡入
fadeToggle()切換淡入淡出
hide() 隱藏元素
show() 現(xiàn)實(shí)元素
toggle() 切換元素的可見(jiàn)狀態(tài)
slideDown() 向下展開(kāi)
slideUp() 向上卷起
slideToggle()依次展開(kāi)或者卷起某個(gè)元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: gold; display: none; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function () { $('#btn').click(function () { $('.box').fadeIn(1000,'swing',function () { //可以加一個(gè)回調(diào)函數(shù) alert('done'); }); }) }) </script> </head> <body> <input type="button" name="" value="動(dòng)畫(huà)" id="btn"> <div class="box"></div> </body> </html>
點(diǎn)擊按鈕,元素淡出,完成之后彈出done,不知道為什么,沒(méi)有運(yùn)行出來(lái),可能是瀏覽器的問(wèn)題。
鏈?zhǔn)秸{(diào)用-層級(jí)菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ font-family: 'Microsoft Yahei'; } body ul{ margin: 0; padding: 0; } ul{ list-style: none; } .menu{ width: 300px; height: 300px; } .menu .level1,.menu li ul a { display: block; width: 300px; height: 30px; line-height: 30; text-decoration: none; background-color: #3366cc; color: #fff; font-size: 16px; text-indent: 10px; } .menu .level1{ border-bottom: 1px solid #afc6f6; } .menu li ul a { font-size: 14px; text-indent: 20px; background-color: #7aa1ef; } .menu li ul li{ border-bottom: 1px solid #afc6f6; } .menu li ul { display: none; } .menu li ul li a:hover{ background-color: #f6b544; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('.level1').click(function () { $(this).next().stop().slideToggle().parent().sibling().children('ul').slideUp(); }) }) </script> </head> <body> <ul class="menu"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="level1">水果</a> <ul class="current"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >蘋(píng)果</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >梨子</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >葡萄</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >火龍果</a></li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="level1">海鮮</a> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >魚(yú)</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >扇貝</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >龍蝦</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >象牙蚌</a></li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="level1">肉類</a> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >牛肉</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >豬肉</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >肌肉</a></li> </ul> </li> </ul> </body> </html>
鏈?zhǔn)秸{(diào)用:
level1的下一級(jí)淡入淡出,返回上一級(jí)的,孩子隱藏。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun 測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jquery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery常用操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery操作xml技巧總結(jié)》及《jQuery擴(kuò)展技巧總結(jié)》
希望本文所述對(duì)大家jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery中:first-child選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:first-child選擇器用法,實(shí)例分析了:first-child選擇器的功能、定義及匹配父元素的第一個(gè)子元素的用法技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12使用jQuery不判斷瀏覽器高度解決iframe自適應(yīng)高度問(wèn)題
這篇文章主要介紹了使用jQuery不判斷瀏覽器高度解決iframe自適應(yīng)高度問(wèn)題,需要的朋友可以參考下2014-12-12jquery焦點(diǎn)圖片切換(數(shù)字標(biāo)注/手動(dòng)/自動(dòng)播放/橫向滾動(dòng))
焦點(diǎn)圖片切換在網(wǎng)頁(yè)制作的商品展示中經(jīng)常會(huì)用到,這樣的效果可以給用戶帶來(lái)耳目一新的感覺(jué)同時(shí)也是用戶比較追捧的,本文也實(shí)現(xiàn)了一個(gè)這樣的焦點(diǎn)圖片切換效果,感興趣的你可以參考下啊,希望本文對(duì)你有所幫助2013-01-01jquery 簡(jiǎn)短幾句代碼實(shí)現(xiàn)給元素動(dòng)態(tài)添加及獲取提示信息
雖然是很基本的東西,但為什么很基本的方法就可以實(shí)現(xiàn)的東西有些人偏偏還要去追求復(fù)雜高深難懂的呢?這里只是交流而已2011-09-09讓頁(yè)面上兩個(gè)div中的滾動(dòng)條(滑塊)同步運(yùn)動(dòng)示例
如何想讓頁(yè)面上兩個(gè)div中的滾動(dòng)條(滑塊)同步運(yùn)動(dòng)該怎實(shí)現(xiàn),具體代碼如下,感興趣的朋友可以參考下2013-08-08Jquery實(shí)現(xiàn)無(wú)縫向上循環(huán)滾動(dòng)列表的特效
今天小編就為大家分享一篇關(guān)于Jquery實(shí)現(xiàn)無(wú)縫向上循環(huán)滾動(dòng)列表的特效,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-02-02