04-jQuery/08-尚硅谷-jQuery-动画操作

好，接着呢，我们看一下几库略当中提供的这个动画的操作啊，动画来，动画在哪个位置呢？大家也可以看到啊，在你打开这个文档，在效果这一栏下面这个地方，动画的使用呢是一样的啊，我们找出两组给大家讲解一下，一个呢是受，受是什么呢？就是将隐藏的元素显示，那么he呢，是将可见的素隐藏。隐藏那车呢，这个就是可见就隐藏，不可见就显示就这样码好，那我们来看一下效果啊，我们打开我们这里啊是哪个呀，动画这个地方。

啊，找到下面这个带下划线的，我们给大家运行起来，左边呢是我们要讲解的这个动画的方法，右边呢是一会我们点击了以后，让这个div去啊展示这样一个动画，好，我们来演示一下。OK。在第一个里面大家看啊，第一个里面点击是收的吗？让谁收啊，让这个div，这个div你看啊。他的ID是T吧，我们去复制一下。好井靠1.show。那么下面这个呢，就是div。好，但是大家今天注意看一下啊，我点击说他瘦了吗？那我点击head呢就有用，大家注意啊，隐藏的动画只是对可见的元素有效，显示这个动画只是对隐藏的元素有效，能理解啥意思吗？就你现在已经是显示在速没啥用，能理解吧，已经看见了啊，比如说我现在已经看了，你再点是不是没啥效果啊，就这个啊，OK，就知道一下啊，这就是隐藏和显示，你看显示隐藏，显示隐藏。

OK，然后这个车呢，就是你看切换的这显示和隐差，来，我把这个元素啊查一下井号div点车go啊等我们刷新一下，走走走走看见吧，都有。那么这个我们再说一下，现在这个效果啊，你已经看见了，但是只是这样子吗？那不是大家可以更有意思，大家注意看啊，那么动画有以上动画方法都可以添加参数。

第一个参数是动画执行的时长以毫秒为单位，以毫秒为单位，那你就可以多给他们加个，比如说哎，这一个一千一千毫秒是一秒啊，然后呢，这个动作呀，他这个动画它每次播放的都是按一秒的时间，甚至你还可以改两秒是吧，按照你自己的需要啊，然后我就随便改一个，看一下这个时长刷新。啊，隐藏是一秒钟。显示呢，两秒慢慢的看到吧，那车呢，车每次都是一秒的时间。每到一秒的时间啊好吗？其实它是通过修改这个元素的宽高值来实现这个动画发现吧，嗯，宽高石吗？好，那第二个参数它还能干嘛，第二个参数是。

动画的回调函数，什么叫做回调函数啊？简单点说就是动画，动画完成后自动调用的函数，我们管它叫做回调函数，我们后面经常会出现某某某回调函数啊，就是指他某件事情完成以后，自动处罚，自动调用那个函数。好，我给你演示一下，我在这里再写a function逗号function，然后我们在这里说什么东西啊，So动化完成，然后下面你也可以加反水，呃，叫做hit动画执行完整，好，那么下面这个地方呢，车同志你也可以加。

啊呃，做叫做这动画缓存好了，那么每次完成之后，它都会调用这个，你看head你有吧，它自动调用的，你只要告诉他自动调用了，就跟那个事件一样，你一点开它就自动就掉了，对吧？嗯，然后显示。你看它一玩它就掉，那么穿孔呢，你每次执行完它就掉。OK，就这样啊啊。那么讲到这里。你们有没有明白或者一件事情啊，咱们前面是不是看到某些元素它一直在动啊，想想起来了吗？就是所注意看啊，所以这个是一直动啊，其实这个动画它就很简单了，那就变得很简单了，你看啊，我大概告诉你原理就是我我在这里呢，写一个函数，对，叫做随便写个ABC吧，走这是一个函数吧，哎，然后然我我我不写在这里。

我写在这边。好，它有个函数，然后这个函数干什么事情呢？我们每次都让它执行这个动画啊，这能吗？这能看懂吧，然后动画完后是不是需要一个函数啊，这个函数呢，又是他自己听懂啥意思了吗？那反复的调切后，是不是切换来切换去，切换来切换去啊，一直没。

啊，我得把这个东西去掉，就刷新一下，好像没有刷新是吧？呃，这个地方要调用一次ABC就好了，这能看懂吗？我这里调用一次，它是不是直接方法，这方法调用它，然后处方完是不是又执行它完成就这。就就这样啊好了啊，就类似这样子，类似这样子了啊，我就做掉了啊就这个意思，嗯，接着呢，我们再来看另一组这个动画啊，另一组动画呢，就是淡入淡出，哎，淡入淡出，那么飞的印呢是淡入，飞的out呢是弹出，但问题是弹入和弹出哪个是消失，哪个是可见，哎，但入这个是可见啊，慢慢的可见，这是慢慢消失。

啊，慢慢修饰来看一下吧，我们在复印啊，还是给这个元素叫做DA，你咋没有提示呢啊，需要查是吧。那就查来走点f in啊，那么下面就是get out呗，也没啥可说的呀，复制一下啊，还边跳你看来刷新一下啊，所的音是进来，但是已经可见的是不没效果啊，这现在出啊走看见了吧，消失了啊，这个呢就慢慢出来了，慢慢出来了比较快，那么大家记住啊，这些动画呢，几块的有个特点，我不知道大家有没有关注过，就咱们今天学过的方法都有个特点，就是什么呢？回来看这些方法是不是都是一个规律，传参它就设置，不传参它就获取，这都都是一个规律是吧？那到了我们这个动画呢，也是一样，它的这个动画的操作呢，都是第一个参数是时长。

你注意看啊，就是都可以一样的用法，比如说我给他1000，或者我给的更长2000就表示两秒啊都可以加，然后你一刷新走fit out慢慢慢慢消失，看见吗？都可以加事情fit in啊慢慢的就来了。啊，有哪个同样你也可以在后面加那个函数啊，都可以的，没想到使用上没有什么区别，这就是几块的设计，特别好的地方就会用一个，好像大家都差不多会懂。啊，就这样子，Get in完成好，然后飞的out完成就讲那一样没啥区别，Out。你看一消失就出来了啊，然后in呢，就是也是进来，它又又又又完成了，你看就这样，那最后的这个车勾呃飞钩呢，切换弹珠弹珠切换就这样啊，没有啥区别啊，就跟前面那你只要看见车购就是切换来我先演示这个啊，它就是非的车购来点点费的车狗看见吧，好啊，那么多给他个时间啊，都是一秒钟啊，都是一秒钟刷新一下点点看见吧，我现在是可见的，我就给你飞的in啊飞得out了啊，那消失了以后呢，我就给你的一都切换啊，切换同样你也跟他后面加个动画啊都可以的，你看使用起来没啥区别。

非折扣成是吧，走吧，折扣了一下啊，出来了，然后又来一次，你看一样吧，这个略不同。

这个略不同，To是啥？是在指定时常内慢慢的将透明度修改到指定的值啊，大家其实注意一下，Fit in其实我们慢慢消失，其实是不是让它慢慢的透明度看不到了啊，看看看见了是吧？那这个飞的on呢，是不是让慢慢透明度变成零了，那这个透明度物其实是多少呢？就是零，就是不可见，就透明能理解吗？透明了一就是完全可见啊，那么0.5半透明，就这样的半透明，那么我们就可以给它设置一下，就比如说呃，我查一下啊，我查这个元素，然后调用非的出入啊，非的出你看第一个。

速度吧，呃，咱们就给他一个，我给多少呢，两秒，然后再给他一个透明度90.5，再给他一个分数。那就给他个分数OK啊，你给不给方数能行，一般情况下咱们这个操作你看吧哈，来吧，就写一下就完了，假如说F塔处完成就可以了啊，哎，就是在两秒的时间内，将这个透明度慢慢变成0.5，就半透明来走你。是吧，啊这样一个效果了哈，好给咱们了解一下OK。