当我们学完了选择器就一定要了解一下类和动画，那么什么是类呢？这里可不是指的类与对象的那个类哈，而是一种样式的集合，我们可以使用类将我们的盒子表现得更加好看；而动画呢？其实就是一个过渡效果：
动画
有了类和动画就让我们的页面有了活力，能够动起来，那么这一期我们就来了解类和动画在jQuery里面要如何使用：
1、类的添加、移除、判断、切换函数：
添加类：addClass('类名')、
移除类：removeClass('类名')、
判断是否含有类：hasClass('类名')、反转类，
如果有就删除，没有就添加toggleClass('类名')；
$(this).addClass('bkg').siblings('li').removeClass('bkg')代码太多，我们就抽出一段来讲解吧，这里的this其实是引起这个响应函数的对象，其实这段代码是从单击响应函数里面抽取出来的，结合上一期，我们为这个li添加了一个名为bkg的类，这个类是自己写的：
.bkg{
background-color: green;
}当然，你们也可以自己写一个类，还有其他方法用法是一致的，不过如果你想添加更多的类的话，只需要用空格隔开就可以：
$(this).addClass('class1 class2')
2、基础动画之随机动画、卷帘动画、淡入动画：
它们的参数大部分是两个，第一个是时长，第二个是回调函数：
显现的延时，一般是左上到右下：
显现：show() 隐藏hide() 切换toggle()；
、卷帘门的动画，从上到下：
下滑slideDown() 上滑slideUp() 切换slideToggle()
淡入淡出效果：
淡入fadeIn() 淡出fadeOut() 切换fadeToggle()
fadeTo()这个要注意，意思是淡入到哪一个透明度，第一个参数依然是时长，但是第二个是不是回调函数，而是透明度小数；
这里注意一些传参问题，如果是传整型数据的话，就是毫秒，如果是传字符串有三种：normal、slow、fast，如果传参错误那么就会默认为normal；
//4.4 利用这个索引来更换bottom的li
$('.shopping>.bottom>li').eq(idx).show(1000).siblings('li').hide(1000)同样代码太多，我抽出一段，这里找到的是li，然后选择了索引为idx的那一个，然后设置一个显现动画，时长为1s，在选择兄弟项，就是除了自己以外的同辈的li，然后隐藏，时长也是1s
<!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>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
img{
width: 100%;
height: 100%;
}
.wrap{
width:520px;
height:350px;
float: left;
border-radius: 4px;
margin: 200px auto;
border: 4px solid white;
}
body{
background-color: white;
}
.wrap li{
float: left;
margin-left: 10px;
margin-top: 10px;
list-style: none;
border:2px solid pink;
width:160px;
height:160px;
}
.parentbox{
width: 130px;
background-color: pink;
border: 2px solid orange;
float: left;
}
.title{
width:120px;
height:30px;
display: inline-block;
line-height: 30px;
text-align: center;
background-color: aqua;
}
.muenson{
width: 120px;
border: 2px solid red;
border-radius: 4px;
list-style: none;
margin-top: 5px;
background-color: aqua;
}
.muenson div{
display: none;
width:120px;
height:80px;
text-align: center;
color: white;
background-color: black;
}
.exhibitionshow{
float: left;
width:310px;
height:180px;
background-color: pink;
}
.exhibitionshow .left{
list-style: none;
float: left;
}
.exhibitionshow .left li{
width: 100px;
height:30px;
margin-top: 5px;
background-color: red;
}
.exhibitionshow .left a{
width: 100%;
height: 100%;
text-decoration: none;
display: inline-block;
line-height: 30px;
text-align: center;
color: black;
}
.exhibitionshow .right{
list-style: none;
width:180px;
margin-left: 10px;
height: 180px;
float: left;
}
.exhibitionshow .right li{
display: none;
}
.exhibitionshow .right li:first-child{
display: block;
}
.shopping{
width:440px;
height:250px;
margin-left: 30px;
float: left;
border:4px solid blue;
background-color: yellow;
}
.shopping .top{
width:440px;
height:30px;
list-style: none;
}
.shopping .top li{
width:100px;
height:30px;
line-height: 30px;
text-align: center;
border: 1px solid blue;
margin-left:5px;
float: left;
}
.shopping .bottom{
list-style: none;
}
.shopping .bottom img {
width:200px;
height:200px;
border:4px solid blue;
margin-top: 10px;
margin-left: 10px;
float:left;
}
.shopping .bottom li{
display: none;
}
.shopping .bottom li:first-child{
display: block;
}
.bkg{
background-color: green;
}
</style>
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<div class="parentbox">
<ul class="muenbox">
<li class="muenson">
<span class="title">标题1</span>
<div>我是box1</div>
</li>
<li class="muenson">
<span class="title">标题2</span>
<div>我是box2</div>
</li>
<li class="muenson">
<span class="title">标题3</span>
<div>我是box3</div>
</li>
<li class="muenson">
<span class="title">标题4</span>
<div>我是box4</div>
</li>
<li class="muenson">
<span class="title">标题5</span>
<div>我是box5</div>
</li>
</ul>
</div>
<div class="exhibitionshow">
<ul class="left">
<li><a href="#">男一号</a></li>
<li><a href="#">男二号</a></li>
<li><a href="#">男三号</a></li>
<li><a href="#">男四号</a></li>
<li><a href="#">男五号</a></li>
</ul>
<ul class="right">
<li><img src="./images/tou1.jpg"></li>
<li><img src="./images/tou2.jpg"></li>
<li><img src="./images/tou3.jpg"></li>
<li><img src="./images/tou4.jpg"></li>
<li><img src="./images/tou5.jpg"></li>
</ul>
</div>
<div class="shopping">
<ul class="top">
<li>第一页</li>
<li>第二页</li>
<li>第三页</li>
</ul>
<ul class="bottom">
<li>
<img src="./images/tou1.jpg">
<img src="./images/tou2.jpg">
</li>
<li>
<img src="./images/tou3.jpg">
<img src="./images/tou4.jpg">
</li>
<li>
<img src="./images/tou5.jpg">
<img src="" alt="照片太帅，无法显示">
</li>
</ul>
</div>
<div class="wrap">
<ul>
<li><img src="./images/tou1.jpg" alt=""></li>
<li><img src="./images/tou2.jpg" alt=""></li>
<li><img src="./images/tou3.jpg" alt=""></li>
<li><img src="./images/tou4.jpg" alt=""></li>
<li><img src="./images/tou5.jpg" alt=""></li>
</ul>
</div>
</body>
<script>
$(function(){
//1.1 设置图片的高亮显示、
//编写鼠标移入的响应函数
$('.wrap>ul>li').mouseenter(function(){
//1.2 将移入的li变为高亮，也就是其他盒子为半透明
$($(this).css('opacity',1)).siblings('li').css('opacity',0.4)
})
//1.3 鼠标离开事件
$('.wrap>ul>li').mouseleave(function(){
//1.4 全部li变为高亮
$('.wrap>ul').find('li').css('opacity',1)
})
//2.1 实现手风琴案例
$('.parentbox>.muenbox>.muenson').click(function(){
$(this).children('div').css('display','block').parent().siblings('li').children('div').css('display','none')
});
//3.1 为左边的li创建点击响应函数
$('.exhibitionshow>.left>li').click(function(){
//切换图片,获取到索引然后运到右边的li上
var idx = $(this).index()
$('.exhibitionshow>.right>li').eq(idx).slideDown().siblings('li').slideUp()
});
$('.exhibitionshow>.left>li').mouseenter(function(){
$(this).css('backgroundColor','skyblue')
});
$('.exhibitionshow>.left>li').mouseleave(function(){
$(this).css('backgroundColor','red')
});
//4.1 为商品展示添加类
//为top的li添加鼠标移入和移出时间
$('.shopping>.top>li').mouseenter(function(){
//4.2 为该li添加类，但是其兄弟元素移除类
$(this).addClass('bkg').siblings('li').removeClass('bkg')
//4.3 获取到该li的索引
var idx = $(this).index()
//4.4 利用这个索引来更换bottom的li
$('.shopping>.bottom>li').eq(idx).show(1000).siblings('li').hide(1000)
});
})
</script>
</html>
好了，代码很长吧，快去试试，虽然繁琐，但是很简单；
