JQuery中的动画整理

【在JQ动画中，都是通过改变元素的CSS属性来产生动画的】

JQ动画有以下几种：

1.show();

$("element").show(1000/"slow(600)"/"fast(200)"/"normal"(400));注意引号和相对应的时间会先改变元素的“display”属性为原来的值（会记住原来的属性值）然后再增加元素的高度和宽度以及不透明度三个属性（height、width、opacity）。

2.hide();

会改变元素的“display”属性为“none”（会记住原来的属性值）在改变元素的“display”属性之前，会通过同时减少“内容”，即元素的高度和宽度以及透明度三个属性。（height、width、opacity），完成修改之后，最后才设置“display：none”。

3.fadeIn();只改变元素的不透明度（增大）。

4.fadeOut();只改变元素的不透明度（减小）。

4.slideUp();（由下至上隐藏，原来显示）

5.slideDown();（由上至下显示,原来为不显示）改变元素的高度

6.animate();自定义动画

$(".mobile-bg").stop().animate({opacity:"0",bottom:"-30px"},300，function(){...动画完成时执行回调函数...});

if(!$(element).is(":animated")){//判断元素是否处于动画状态，如果当前没有进行动画，则添加动画}

7.delay()；动画延迟，必须要有动画才能延迟，所以要用到动画前面。

$(this).next(".family-info").stop(true, false).delay(500).fadeIn(0);

8.stop(true，false),停止当前动画，true清空未执行完的动画队列，false，不将正在执行的动画跳转到末状态。

9.toggle();切换元素可见状态

10.slideToggle();通过高度变化切换元素可见状态

11.fadeTo(600,0.2);把元素的不透明度以渐进方式调整到指定的值

12.fadeToggle();通过不透明度变化来切换元素的可见性

---------------------------------------------------------------------------------------------

| **************方法名**********************说明

---------------------------------------------------------------------------------------------

|**********hide()&show()******************修改高度、宽度、不透明度

---------------------------------------------------------------------------------------------

|********fadeIn()&fadeOut()**************只修改不透明度

---------------------------------------------------------------------------------------------

|*******slidUp()&slidDown()**************只修改高度

---------------------------------------------------------------------------------------------

|*************fadeTo()
*********************只修改不透明度

---------------------------------------------------------------------------------------------

|**************toggle()*********切换代替执行hide()和show()，all

---------------------------------------------------------------------------------------------

|***********slideToggle()
*****切换代替执行slidUp()&slidDown()，height

---------------------------------------------------------------------------------------------

|***********fadeToggle()******切换代替执行fadeIn()&fadeOut()，opacity

---------------------------------------------------------------------------------------------

|************animate()
********all,以上动画实质内部都调用了animate()方法
---------------------------------------------------------------------------------------------