JQ动画：animate()方法的学习

JQ动画：animate()方法的学习

一、第一部分：

我们先设置HTML的结构，我分别使用了两个div以及button按钮，来分别演示animate()方法的不同的功能.

 

二、第二部分

在写CSS中，我们在写animate()方法时候，要注意：在默认的情况下，所有的HTML元素的位置都是静态的，而且是无法移动的，如果我们要移动它们的位置，我们就要把元素中的CSS结构里的position定位属性设置为relative、fixed 或 absolute.

  

三、第三部分

Animate()方法用于创建自定义动画

语法为：$(“”).animate({params},speed,callback);

Params：它的第一个参数的意思是：定义形成动画的Css属性

Speed：speed 是一个可选的参数，规定效果的时长。它可以取以下值："slow"、"fast"       或毫秒

Callback：选的 callback 参数是动画完成后所执行的函数名称。

在这一部分中我们要知道的有两点

1、：这一部分是我们要注意的

（1）、我们在使用animate()方法的时候，必须使用Camel 标记法书写所有的属性名，

比如：border-radius：这是不使用animate()方法的写法

      borderRadius:  这是使用animate()方法的正确写法

（2）、一般情况下，我们给animate()方法设置颜色，是没有效果的，而我们如果想要生成颜色动画的效果，就需要从 jQuery.com 下载Color Animations 插件。

   2、我们还要知道它的四个小知识点！

   （1）、animate() - 操作多个属性

         在第一个参数中，我么可以给它设置多个Css元素

   （2）、animate() - 使用相对值

              我们也可以定义相对值（该值相对于元素的当前值），需要在值的前面加上 += 或     -=.

   （3）、animate() - 使用预定义的值

              我们也可以把属性的动画值设置为 "show"、"hide" 或 "toggle”

   （4）、animate() - 使用队列功能

              如果我们要执行不同的动画效果，那么我们就可以使用animate()方法的队列功能

 

四、第四部分

下面的两张图是animate()方法的效果显示

这是我所学到的JQ效果animate() 方法，想分享给你们，希望可以帮助到你们。以上就是我的分享，如有更好的方法，欢迎大家推荐！写错的地方，欢迎大家在评论区指正！谢谢