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

用户57923016702
37 阅读8分钟

  六 ：自定义动画 animate 

参数含义: 

6.1 自定义动画animate 案例

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

一：显示与隐藏

=========

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

  •  show ( **speed，**easing，fn )     ：显示
  •  hide  ( speed，easing，fn )      ：隐藏
  •  toggle ( speed****，easing，fn )    ：显示隐藏切换

参数含义： 

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

1.1 显示函数 show

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

div{ width: 300px; height: 300px; background-color: rgb(255, 146, 146); display: none; }

     显示效果：

1.2 隐藏函数 hide

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

div{ width: 300px; height: 300px; background-color: rgb(255, 146, 146); }

     隐藏效果：

1.3 显示隐藏切换函数 toggle

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

div{ width: 200px; height: 200px; background-color: rgb(255, 146, 146); }

切换

   显示切换效果： 

    隐藏切换效果：

二：滑动效果 

========

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

  • slideDown ( **speed，**easing，fn )    ：下拉
  • slideUp ( **speed，**easing，fn )         ：上拉
  • slideToggle ( **speed，**easing，fn )   ：上拉下拉切换

参数含义：

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

2.1 下拉函数 slideDown 

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

div{ width: 300px; height: 400px; background-color: rgb(255, 181, 181); display: none; }

下拉

    下拉效果： 

2.2 上拉函数 slideUp 

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

div{ width: 300px; height: 400px; background-color: rgb(255, 181, 181); }

上拉

     上拉效果： 

2.3 上拉下拉切换函数 slideToggle

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

div{ width: 300px; height: 400px; background-color: rgb(255, 181, 181); }

切换

     下拉显示效果： 

      上拉隐藏效果： 

三：事件切换

=======

   有了下拉上拉的基础，我们就可以写一个下拉菜单真正意义上下拉的效果啦，为方便起见我们只写了一个下拉菜单，并且 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 必写__）

参数含义：

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

5.1 淡入函数 fadeIn

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

div{ width: 300px; height: 300px; background-color: rgb(255, 188, 188); display: none; }

淡入

  淡入效果：

5.2 淡出函数 fadeOut

div{ width: 300px; height: 300px; background-color: rgb(255, 188, 188); }

淡出

   淡出效果：

5.3 淡入淡出转换函数 fadeToggle

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

div{ width: 300px; height: 300px; background-color: rgb(255, 188, 188); }

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

前端资料图.PNG 开源分享：docs.qq.com/doc/DSmRnRG…

avatar
文章
阅读
粉丝