jQuery学习笔记之（一）动画与特效

妖狐艹你老母 2022-08-05 16:18 144阅读 0赞

本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。  
1.显示和隐藏hide()和show()  
对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

以上是对hide()和show()函数的测试。

2.使用show()、hide()和toggle()方法  
上个例子对show()和hide()方法做了简单介绍，其实这两个方法可以接受参数控制显隐藏过程。  
语法如下

show(duration,[callback]);
    hide(duration,[callback]);

其中，duration表示动画执行时间的长短，可以表示速度的字符串，包括slow,normal,fast.也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

例子和第一个例子相同，只是对hide()和show()增加了时间参数。其实toogle()也可以加入事件参数。

2.使用fadeIn()和fadeOut()方式  
对于动画效果显隐，jQuery还提供了fadeIn()个fadeOut这两个实用的方法，他们的动画效果类似褪色，语法与slow()和hide()完全相同。

fadeIn(duration, [callback]);
                fadeOut(duration, [callback]);

例子

![复制代码][copycode.gif]

![复制代码][copycode.gif]

fadeTo()方法的使用。

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

例子：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

fadeOut相关参数

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(75,75,75); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:20.7999992370605px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <span style="">speed</span></td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto; font-size:14px">可选。规定元素从当前透明度到指定透明度的速度。</p> <p style="margin:10px auto; font-size:14px">可能的值：</p> 
    <ul style="list-style-position:initial; margin:0px 0px 10px 45px; padding-left:0px; font-size:11px"> 
     <li style="list-style:inherit!important">毫秒 （比如 1500）</li> 
     <li style="list-style:inherit!important">"slow"</li> 
     <li style="list-style:inherit!important">"normal"</li> 
     <li style="list-style:inherit!important">"fast"</li> 
    </ul> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <span style="">opacity</span></td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <span style="">callback</span></td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto; font-size:14px">可选。fadeTo 函数执行完之后，要执行的函数。</p> <p style="margin:10px auto; font-size:14px">如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。</p> <p style="margin:10px auto; font-size:14px">除非设置了 speed 参数，否则不能设置该参数。</p> </td> 
  </tr> 
 </tbody> 
</table>

3.幻灯片slideUp和slideDown效果

![复制代码][copycode.gif]

![复制代码][copycode.gif]

前面提到了几种动画效果，jQuery还提供了slideUp()和slideDown()来模拟PPT中的类似幻灯片拉帘效果，它与slow()和hide()完全相同。

以上代码定义了一个div和一个img,用add方法组合在一起。

4.自定义动画

考虑到框架的通用性及代码文件的大小，jQuery不能涵盖所有的动画效果，但它提供了animate()方法，能够使开发者自定义动画。本节主要通过介绍animate()方法的两种形式及应用。

animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。用法如下

animate(params,[duration],[easing],[callback])

其中params为希望进行变幻的css属性列表，以及希望变化到的最终值，duration为可选项，与show()/hide()的参数含义完全相同。easing为可选参数，通常供动画插件使用。 用来控制节奏的变化过程。jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。

需要注意。params中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外，params只能是css中用数值表示的属性。例如width.top.opacity等

像backgroundColor这样的属性不被animate支持。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

在params中，jQuery还可以用“+=”或者"-="来表示相对变化。如

![复制代码][copycode.gif]

![复制代码][copycode.gif]

先将div进行绝对定位，然后使用animate()中的-=和+=分别实现相对左移和相对右移。

animate()方法还有另外一种形式，如下所示：

animate(params,options)

其中，params与第一种形式完全相同，options为动画可选参数列表，主要包括duration,esaing，callback,queue等，其中duration.easing.callback与第一种形式完全一样，queue为布尔值，表示当有多个 animate()组成jQuery时，当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false

如下例子，展示了animate()第二种用法。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。可以通过重置反复测试，熟悉animate()第二种形式。

**其他精彩文章**

## [jQuery教程(29)-jQuery插件开发之为插件方法指定参数][jQuery_29_-jQuery] ##

## [jQuery教程(28)-jQuery插件开发之使用插件][jQuery_28_-jQuery] ##

## [jQuery教程(27)-jQueryajax操作之修改默认选项][jQuery_27_-jQueryajax] ##

## [jQuery教程(26)-ajax操作之使用JSONP加载远程数据][jQuery_26_-ajax_JSONP] ##

## [jQuery教程(25)-ajax操作之安全限制][jQuery_25_-ajax] ##

[copycode.gif]: /images/20220806/1ed611c717fe4e329dc17da00ee39c41.png
[jQuery_29_-jQuery]: http://www.itmmd.com/201501/519.html
[jQuery_28_-jQuery]: http://www.itmmd.com/201501/518.html
[jQuery_27_-jQueryajax]: http://www.itmmd.com/201501/515.html
[jQuery_26_-ajax_JSONP]: http://www.itmmd.com/201501/512.html
[jQuery_25_-ajax]: http://www.itmmd.com/201501/511.html