JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 21:57:09

JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例

JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例:本文實例講述了JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作。分享給大家供大家參考，具體如下： JQuery的特殊效果 fadeOut()淡入 fadeToggle()切換淡入淡出 hide() 隱藏元素 show() 現(xiàn)實元素 toggle() 切換元素的可見狀態(tài) slideDown() 向下展開 slide

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例:本文實例講述了JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作。分享給大家供大家參考，具體如下： JQuery的特殊效果 fadeOut()淡入 fadeToggle()切換淡入淡出 hide() 隱藏元素 show() 現(xiàn)實元素 toggle() 切換元素的可見狀態(tài) slideDown() 向下展開 slide

<!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 () {
 //可以加一個回調(diào)函數(shù)
 alert('done');
 });
 })
 })
 </script>
</head>
<body>
<input type="button" name="" value="動畫" id="btn">
 <div class="box"></div>
</body>
</html>

點擊按鈕，元素淡出，完成之后彈出done，不知道為什么，沒有運行出來，可能是瀏覽器的問題。

鏈?zhǔn)秸{(diào)用-層級菜單

<!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" >蘋果</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>
 <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的下一級淡入淡出，返回上一級的，孩子隱藏。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果。

更多關(guān)于jquery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery常用操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery操作xml技巧總結(jié)》及《jQuery擴展技巧總結(jié)》

希望本文所述對大家jquery程序設(shè)計有所幫助。

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

JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：特殊效果實例 jQuery

熱門焦點

JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例

JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例

JQuery特殊效果和鏈?zhǔn)秸{(diào)用操作示例

最新推薦

猜你喜歡

熱門推薦