Detailed explanation of jQuery animation and special effects_jquery

1. Show and hide hide() and show()

For animation, showing and hiding are one of the most basic effects. This section briefly introduces the display and hiding of jQuery.

Copy code The code is as follows:

         ">           
          

Usage of fadeTo() method. The

fadeTo() method gradually changes the opacity of the selected element to the specified value.

Example:

Copy code The code is as follows:

 
   
   
   
   

   

前面提到了几种动画效果，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支持。

复制代码 代码如下:

       
        Go>>
       

动画！

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

复制代码 代码如下:

       
        Go>>
        Go>>
       

动画！

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

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

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

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

复制代码 代码如下: