JQuery特殊效果和鏈式調用操作示例

來源：懂視網責編：小采時間：2020-11-27 21:57:09

JQuery特殊效果和鏈式調用操作示例

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

推薦度：

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

導讀JQuery特殊效果和鏈式調用操作示例:本文實例講述了JQuery特殊效果和鏈式調用操作。分享給大家供大家參考，具體如下： JQuery的特殊效果 fadeOut()淡入 fadeToggle()切換淡入淡出 hide() 隱藏元素 show() 現實元素 toggle() 切換元素的可見狀態 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 () {
 //可以加一個回調函數
 alert('done');
 });
 })
 })
 </script>
</head>
<body>
<input type="button" name="" value="動畫" id="btn">
 <div class="box"></div>
</body>
</html>

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

鏈式調用-層級菜單

<!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>

鏈式調用：

level1的下一級淡入淡出，返回上一級的，孩子隱藏。

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

更多關于jquery相關內容感興趣的讀者可查看本站專題：《jquery常用操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery操作json數據技巧匯總》、《jQuery操作xml技巧總結》及《jQuery擴展技巧總結》

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

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