jquery原理与ajax基础系列（五）之动效（运动）

 one.常用的运动

show() hide()  toggle()

slideDown()  slideUp() 

fadeIn()  fadeOut()   fadeToggle()  fadeTo() 

几点说明：

1.除了fadeTo()需要在time后带参数表示“to”到某一个程度的透明度，他们的格式都是一样的：

dom.show/hide/toggle/slideDown/slideUp/fadeIn/fadeOut/fadeToggle()(time(毫秒)，function(){})

dom.fadeTo(time,小于1的数表示透明度，function(){})

2.第一组show() hide() toggle()变化的方式是在一定的时间内改变透明度/长度宽度，且透明度/长度/宽度同步变化着；

第二组slideDown()   slideUp() 要注意的是他的变化方式是从顶部（slideDown()）或者底部(slide)一点一点的“推”出来的，开始显示的是一部分（非等比拉伸的缩略，初学的时候如果用的纯色的图片容易忽略）；

fade系列专注于透明度。

 

two.可自我定义的运动

某种形式上，常用运动show()/hide()/toggle/slideDown/slideUp/fadeIn/fadeOut/fadeTo是通过可定义的运动animate()形成的“常见”的写法。这么做，是为了方便，“do more,write less”

animate    dom.animate({},time,function(){})

在dom.animate({},time,function())中，json{}

与CSS3中的动画animation中的比较

 

three.  stop() delay()

默认形式stop()可以阻止

stop参数的四种表达：

stop(参数1,参数2)-----stop(后续动画的状态（参数1），当前动画的状态(参数2）)

后续动画的状态分为两种:

1.停止（参数为true） ,2.正常的运行（参数为false）。不存在快速完成后续动画的情形（快进）

当前动画的状态也分为两种:

1.（退出当前动画）停止（参数为flase,说“停止”容易混淆，“退出当前”=false）      ，   

2. 快速完成当前的动画 （参数为true）。

不存在正常完成当前动画的情形（因为没有这个必要。如果需要正常完成，直接不带参数就可以了）

将上述的总结，变成这样的一个式子:

stop(后续动画停止true/后续动画正常运行false,(stop前)退出当前动画false/快速完成当前动画true)

比如,stop(false)==stop(false,false)=stop()

 

four.常见的几种功能模块