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:

2. Use show(), hide() and toggle() methods

The previous example briefly introduced the show() and hide() methods. In fact, these two methods can accept parameters to control the display and hide process.
The syntax is as follows

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

Among them, duration represents the length of animation execution time, which can be a string representing speed, including slow, normal, and fast. It can also be an integer representing time (milliseconds). callback is an optional callback function. Executed after the animation completes.

Copy code The code is as follows:

                $(function() {

                     $("input:first").click(function() {
                             $("p").hide(300); //Hide
                });
                     $("input:last").click(function() {
                           $("p").show(500); //Show
                });
            });
                                                                                         


The example is the same as the first example, except that time parameters are added to hide() and show(). In fact, toogle() can also add event parameters.

2. Use fadeIn() and fadeOut() methods

For animation effects, jQuery also provides two practical methods: fadeIn() and fadeOut. Their animation effects are similar to fading, and their syntax is exactly the same as slow() and hide().
fadeIn(duration, [callback]);

               fadeOut(duration, [callback]);

Example

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:

fadeOut related parameters

speed Optional. Specifies the speed at which an element changes from the current transparency to the specified transparency.

Possible values:

Milliseconds (e.g. 1500)

"slow"

"normal"

"fast"
opacity required. Specifies the transparency to fade in or out. Must be a number between 0.00 and 1.00.
callback
Optional. The function to be executed after the fadeTo function is executed.

To learn more about callbacks, visit our jQuery Callback chapter.

This parameter cannot be set unless the speed parameter is set.

3. Slide slideUp and slideDown effects

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()第二种用法。

复制代码 代码如下:

       

Block2

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

以上就是本文的全部内容了，希望大家能够喜欢。