JQuery特殊效果和鏈式調用操作示例
更新時間：2019年05月13日 12:01:04 作者：SpecYue
這篇文章主要介紹了JQuery特殊效果和鏈式調用操作,結合實例形式分析總結了jQuery各種常見顯示效果與所使用的函數,以及鏈式調用顯示層級菜單功能相關操作技巧,需要的朋友可以參考下
本文實例講述了JQuery特殊效果和鏈式調用操作。分享給大家供大家參考，具體如下：
JQuery的特殊效果
fadeOut()淡入
fadeToggle()切換淡入淡出
hide() 隱藏元素
show() 現實元素
toggle() 切換元素的可見狀態(tài)
slideDown() 向下展開
slideUp() 向上卷起
slideToggle()依次展開或者卷起某個元素
<!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程序設計有所幫助。
相關文章
這篇文章主要介紹了jQuery中:first-child選擇器用法,實例分析了:first-child選擇器的功能、定義及匹配父元素的第一個子元素的用法技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
我們在很多網站看到，當我們滾動網頁時，網頁內的廣告或某個小區(qū)域并不會消失，而是浮動在屏幕的某個地方，特別是一些局域廣告2012-07-07
使用jQuery不判斷瀏覽器高度解決iframe自適應高度問題
這篇文章主要介紹了使用jQuery不判斷瀏覽器高度解決iframe自適應高度問題,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jq 用each遍歷循環(huán)的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了jQuery中$原理,結合實例形式分析了jQuery中$的原理與運行機制,并具體分析了jQuery對象構造的具體原理,需要的朋友可以參考下2018-08-08
jquery焦點圖片切換(數字標注/手動/自動播放/橫向滾動)
焦點圖片切換在網頁制作的商品展示中經常會用到，這樣的效果可以給用戶帶來耳目一新的感覺同時也是用戶比較追捧的，本文也實現了一個這樣的焦點圖片切換效果,感興趣的你可以參考下啊，希望本文對你有所幫助2013-01-01
jquery 簡短幾句代碼實現給元素動態(tài)添加及獲取提示信息
雖然是很基本的東西，但為什么很基本的方法就可以實現的東西有些人偏偏還要去追求復雜高深難懂的呢？這里只是交流而已2011-09-09
有時候我們想在js里面使用加密，jQuery就提供了這樣的插件，用法十分簡單2010-03-03
如何想讓頁面上兩個div中的滾動條(滑塊)同步運動該怎實現，具體代碼如下，感興趣的朋友可以參考下2013-08-08
今天小編就為大家分享一篇關于Jquery實現無縫向上循環(huán)滾動列表的特效，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02