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