详解jQuery动画

jQuery的动画主要分为两个大方面：内置动画和自定义动画，本文主要学习个讲解这两个方面。

一．内置动画：

1. 显示hide()/隐藏show()/显示或隐藏toggle()

代码如下：

2. 上拉slideUp()/下拉slideDown()/上拉或下拉slideToggle()

代码如下：

3. 淡出fadeOut()/淡入fadeIn()/淡出或淡入fadeToggle()

代码如下：

以上方法中可以接受两个参数，分别是：

参数1：动画执行的时间或者表示速度的字符串，可省略。

参数2：回调函数，在动画完成之后执行的内容，可省略。如：

  $("#btn1").click(function(){

        $("#box").hide(200,"linear",function(){

alert("动画结束了")

        });

    })

4. 半透明fadeTo()

代码如下：

此方法可以将被选元素的不透明度逐渐地改变为指定的值，

可以接受三个参数，分别是：

参数1：动画执行的时间，可省略。

参数2：透明度的数值，介于0-1之间。不可省略。

参数3：回调函数，在动画完成之后执行的内容。

二．自定义动画：

jQuery同时提供了animate()方法，能够使开发者自定义动画。

animate()方法可接受三个参数：

参数1：对象，即为希望进行变化的css属性列表，以及希望变化到的最终值，必选

参数2：:动画运动的时间，可省略

参数3：:回调函数，表示动画结束后要做的事情，可省略

代码如下：

    

    

    

需要注意的是：animate()方法中参数1中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.并且只能是css中用数值表示的属性。例如width、top、opacity等

像backgroundColor这样的属性不被animate()方法支持。

以上为jQuery动画的详解，如果有误，敬请纠正。