你真的拿捏 jQuery 四大动画效果了吗?【入门篇超详细 零基础适用】

在艰难的原生 JS 路上我们是否做过各种各样的动画效果呢,例如轮播图的动画函数,下…

在艰难的原生 JS 路上我们是否做过各种各样的动画效果呢,例如轮播图的动画函数,下拉菜单,但是其实之前的显示与隐藏等小操作都属于动画效果,在 jQuery 领域我们可以将这些显示隐藏放慢100倍 1000倍来让你看清楚其动画效果,这些就用到了显示与隐藏的 隐藏参数,下面大家看一下 jQuery 为我们写好了哪些动画函数呢?

在开始前先给各位来一个温馨注意事项:" 动画函数只要触发就一定会执行,这句话在第四板块会提及到,大家多注意 "

jQuery 已封装好的动画函数分类

  • 显示隐藏效果
  • 滑动效果(事件切换,动画排队现象)
  • 淡入淡出效果
  • 自定义动画

" 此篇文章就带大家了解这些方法,走进更为简便的动画世界 !!"


文章目录:

一 :显示与隐藏

参数含义:

1.1 显示函数 show

​ 显示效果:

1.2 隐藏函数 hide

​ 隐藏效果:

1.3 显示隐藏切换函数 toggle

​ 显示切换效果:

​ 隐藏切换效果:​

二 :滑动效果

参数含义:

2.1 下拉函数 slideDown

​ 下拉效果:

2.2 上拉函数 slideUp

​ 上拉效果:

2.3 上拉下拉切换函数 slideToggle

​ 下拉显示效果:

​ 上拉隐藏效果:

三 :事件切换

3.1 下拉菜单普通写法:

3.2 下拉菜单切换函数写法:

3.3 下拉菜单最简写法 ( 只有一个函数 ):

四 :动画排队现象:

改进下拉菜单(停止了动画排队现象):

五 :淡入淡出效果

参数含义:

5.1 淡入函数 fadeIn

​淡入效果:

5.2 淡出函数 fadeOut

​淡出效果:

5.3 淡入淡出转换函数 fadeToggle

​淡入显示效果:

​淡出隐藏效果:

5.4 不透明度改变函数 fadeTo

​不透明度切换效果:

六 :自定义动画 animate

参数含义:

6.1 自定义动画animate 案例

​自定义动画改变效果:​


一:显示与隐藏

显示与隐藏在前期 jQuery 的文章里我们已经或多或少使用过了,那就是 show()hide(),但是我们只是调用了一下这两个封装好的方法罢了。并没有给其内部设置参数,其实这两个方法是有隐藏参数的,当然 可以带参数可以不带参数。

  • show ( speed,easing,fn ) :显示
  • hide ( speed,easing,fn ) :隐藏
  • toggle ( speedeasing,fn ) :显示隐藏切换

参数含义:

参数 speed easing fn
含义 速度参数,可写为 slow,nomarl, fast,也可以写成特定的毫秒数值 用来指定特定的过度效果,默认为 swing,可换为 linear,往往不写 回调函数,在动画执行完后调用动画函数内的内容

1.1 显示函数 show

show ( speed,easing,fn ),可以带参数可以不带参数,可以让元素显示,下面代码的意义为,显示的过程为5000毫秒(5秒) ,显示过后会调用回调函数,并且过程以 swing 的方式过渡

显示效果:


1.2 隐藏函数 hide

hide ( speed,easing,fn ),可以带参数可以不带参数,可以将显示的元素隐藏,以下代码含义为,隐藏的过程为5000毫秒(5秒) ,隐藏过后会调用回调函数,并且过程以 swing 的方式过渡

隐藏效果:


1.3 显示隐藏切换函数 toggle

toggle ( speed,easing,fn ) ,可以带参数可以不带参数,可以切换元素,其实是判断该元素是否显示,如果此元素是显示的,则给它隐藏,如果此元素是隐藏的,则给它显示。

显示切换效果:

隐藏切换效果:


二:滑动效果

上拉下拉的最终目的其实也是元素的显示与隐藏,还记得我们的下拉菜案案例吗?当时我们只用了移动光标使下拉盒子直接显示或隐藏,没有动态效果非常的丑陋,我们学习了这一节滑动效果,就可以使你的下拉菜单真正意义上的下拉,实现更完美的动画效果,下面介绍一下几种常用的:

  • slideDown ( speed,easing,fn ) :下拉
  • slideUp ( speed,easing,fn ) :上拉
  • slideToggle ( speed,easing,fn ) :上拉下拉切换

参数含义:

参数 speed easing fn
含义 速度参数,可写为 slow,nomarl, fast,也可以写成特定的毫秒数值 用来指定特定的过度效果,默认为 swing,可换为 linear,往往不写 回调函数,在动画执行完后调用动画函数内的内容

2.1 下拉函数 slideDown

slideDown ( speed,easing,fn )可以带参数可以不带参数,可以让元素以下拉的形式慢慢显示出来

下拉效果:


2.2 上拉函数 slideUp

slideUp ( speed,easing,fn ) ,可以带参数也可以不带,可以让元素以上拉的形式慢慢隐藏起来

上拉效果:


2.3 上拉下拉切换函数 slideToggle

slideToggle ( speed,easing,fn ) ,可以带参数可以不带参数,可以切换元素上拉下拉,其实是判断该元素是否显示,如果此元素是显示的,则给它上拉隐藏,如果此元素是隐藏的,则给它下拉显示。

下拉显示效果:

上拉隐藏效果:


三:事件切换

有了下拉上拉的基础,我们就可以写一个下拉菜单真正意义上下拉的效果啦,为方便起见我们只写了一个下拉菜单,并且 css 在文章结构中就不展示啦,需要的话在文章末尾自己取哦,所谓事件切换,是 jQuery 为开发效率及减少代码冗余问题得来的一个函数,多用于有去有回的事件,例如鼠标移上移走,点击打开和点击关闭这类双重事件,下面说明一下其用法:

$( 'ele' ) . hover ( function() {触发函数} , function() {移除函数} )

我们先看看不用切换函数的话应该怎么写:

3.1 下拉菜单普通写法:

3.2 下拉菜单切换函数写法:

3.3 下拉菜单最简写法 ( 只有一个函数 ):

实现原理:里面只写一个函数的话,经过离开都会触发函数从而触发里面的内容


四:动画排队现象:

动画函数一旦触发必定执行完毕,意味着如果刚才的下拉菜单我们迅速地经过了十次,那么哪怕你不再移动上去,它也会把这十次给做完,这就是动画排队现象,这明显是不符合我们对下拉菜单效果的期望的,因此我们需要学习如何停止动画排队现象

处理方法:stop ()

注意一定要放在动画函数的前面 !!!这个方法就是触发时先停止之前的动画,再执行本次动画函数,其实有些类似于排他思想

改进下拉菜单(停止了动画排队现象):


五:淡入淡出效果

淡入淡出最终目的一样也是元素的显示与隐藏,只不过这个更有科技感,像隐身一样消失,再像隐身解除一样地显现出来,下面是淡入淡出的几个方法:

  • fadeIn ( speed,easing,fn ) :淡入
  • fadeOut ( speed,easing,fn ) :淡出
  • fadeToggle ( speed,easing,fn ) :淡入淡出效果切换
  • fadeTo ( speed,opacity,easing,fn ) :修改不透明度(speed,opcity 必写

参数含义:

参数 speed easing fn opacity
含义 速度参数,可写为 slow,nomarl, fast,也可以写成特定的毫秒数值 用来指定特定的过度效果,默认为 swing,可换为 linear,往往不写 回调函数,在动画执行完后调用动画函数内的内容 不透明度,取值 0-1

5.1 淡入函数 fadeIn

让元素慢慢的显示出来,参数可写可不写

淡入效果:


5.2 淡出函数 fadeOut

淡出效果:


5.3 淡入淡出转换函数 fadeToggle

用于淡入淡出的切换,其实为判断有没有显示或隐藏,如果显示了,就让其淡出隐藏,如果没有显示,就淡入显示

淡入显示效果:

淡出隐藏效果:


5.4 不透明度改变函数 fadeTo

用于切换不透明度,参数为 0-1,这个 与 是 speed 必写参数

不透明度切换效果:


六:自定义动画 animate

我们在原生JS 写过一个动画函数,并且封装在了单独的一个JS 文件中,随用随调即可,但是jQuery也给我们封装好了一个动画函数,并且比原生JS 的更加强大

用法:animate ( params , speed , easing , fn ) params 为必写参数 !!!

参数含义:

参数 params speed easing fn
含义 写想要更改的样式属性,以对象形式传递,必写 速度参数,可写为 slow,nomarl, fast,也可以写成特定的毫秒数值 用来指定特定的过度效果,默认为 swing,可换为 linear 回调函数,在动画执行完后调用动画函数内的内容

6.1 自定义动画animate 案例

例如我们想让元素移动到距离左边 300px,距离上面 200px,宽度增加100px,高度增加 50px,并且不透明度变为 0.7,并要求 2s 完成,完成后弹出 “我完成啦”,用自定义动画就及其简单啦,注意以对象形式传入要改变的属性,并且设置动画函数的必须是元素,不能是文档,例如让整个页面移动时,不能给 $(document) 设置动画函数,而应该给 $('html') 设置动画函数,这点很重要!!!!!!!!!!

自定义动画改变效果:

至此为止,这就是jQuery的四大基本动画,谢谢大家支持!!

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/2446.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部