jQuery特殊效果
- fadeIn() 淡入
- fadeOut() 淡出
- fadeToggle() 切换淡入淡出
$box.fadeToggle(1000,function(){
alert('动画结束!');//一次动画结束后执行一次回调函数;
});
- hide() 隐藏元素
- show() 显示元素
- toggle() 切换元素的可见状态
- slideDown() 向下展开
- slideUp() 向上展开
- slideToggle() 依次展开或卷起某个元素
jQuery链式调用
jQuery对象的方法会在执行完后返回这个jQuery对象,所有jQuery对象的方法可以连起来写。
类似:
$('.box') //class为box的元素
.children('ul') //该元素下的ul子元素
.slidedown('fast') //将ul元素向下展开来显示。
注:链式调用可以写很长,能执行的效率比较高
练习-层级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
<script>
$(function(){
// 获取种类对象
var $sort = $('.sort');
// 获取下拉列表对象
var $ul = $('ul');
$sort.click(function(){
/*关键步骤,当前点击的对象后面紧挨着的同级元素执行展开或卷起,
再到父级除其父级外的其他父级下的子元素ul向上卷起*/
$(this).next().slideToggle().parent().siblings().children('ul').slideUp();
})
})
</script>
<style>
/* 主容器 */
.container{
width: 200px;
border: 2px solid lightcoral;
margin:0 auto;
}
/* 种类容器 */
.box{
border-top: 2px solid lightcoral;
text-align: center;
font-size: 20px;
line-height: 2;
}
.box:first-of-type{
border-top: none;
}
/* 种类 */
.sort{
background-color: rgb(144, 238, 144, 1);
}
.sort:hover{
background-color:rgb(133, 220, 133, 1);
}
/* 种类的下拉列表 */
ul{
list-style: none;
padding: 0;
margin: 0;
}
.box ul{
background-color: #fff;
display: none;
}
.box ul>li{
border-top: 2px solid lightcoral;
background-color: rgb(250, 250, 210, .5);
}
.box ul>li:hover{
background-color: rgb(250, 250, 210, 1);
}
</style>
</head>
<body>
<ul class="container">
<li class="box">
<div class="sort">水果</div>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>雪莲果</li>
<li>火龙果</li>
<li>山竹</li>
</ul>
</li>
<li class="box">
<div class="sort">蔬菜</div>
<ul>
<li>土豆</li>
<li>辣椒</li>
<li>生菜</li>
<li>韭菜</li>
<li>大葱</li>
<li>胡罗卜</li>
</ul>
</li>
<li class="box">
<div class="sort">肉禽</div>
<ul>
<li>牛肉</li>
<li>羊肉</li>
<li>五级雪花肥牛</li>
<li>鸡蛋</li>
<li>土鸡蛋</li>
<li>鸡肉</li>
</ul>
</li>
</ul>
</body>
</html>
效果图: