jQuery动画功能集合

动画

所有speed参数均可传入字符串或是数字,对应slow=600,normal=400,fast=200,不传或是传入字符串不对则默认normal(show及hide方法例外)。如果为number类型,则表示动画的持续时间毫秒值。所有的动画都可带回调函数,当动画结束时调用。

隐藏和显示、切换

show()

无参数 此时表示显示对象,注意无动画效果,相当于css(“display”,"block);

带第一个参数,表示speed参数。

带两个参数,第一个参数同上,第二个参数为动画完成后的回调函数。

hide() 类似show方法。

toggle()

类似show方法。在调用对象显示时调用hide方法,隐藏时调用show方法。

以上三个方法均可传键值对对象。属性包括duration持续时间 easing动画类型(默认swing,还有linear等) complete回调函数 queue是否加入队列。还有其他较少用参数。

slide 滑入滑出改变的是高度

高度只是暂时改变,再调用fade、show之类方法会回复原状。

slideDown(speed,callback) 用法及参数传入均同show方法,注意无参会有动画效果。

slideUp() 往上拉

slideToggle()

fade 淡入淡出改变的是不透明度

fadeIn 淡入,显示出来

fadeOut 淡出,慢慢消失

fadeToggle

fadeTo(speed,to) to必须位于第二个参数,第一个参数同speed。注意,经fadeTo改变后的不透明度,其他fadeIn或是fadeToggle重新显示出来时只会等于to,同样fadeTo也可以有回调函数。

动画

.animate({params}, speed, callback) 第一个参数必选且需为键值对对象。

.stop(clearQueue, jumpToEnd) 默认两个参数均为false,表示立即停止现有动画并执行下一个动画。第一个参数表示后续动画是否不执行true不执行,false执行(动画队列,链式编程可能会有动画队列)。第二个参数true时立即跳至当前动画结束位置,false时立即停止当前动画。动画还未执行完时调用stop方法则回调函数不执行。

举例 $ele.animate(1).animate(2),如1过程中执行stop(),则1停止并马上执行2. stop(true,true)立即跳至1动画末不动。stop(false,true)立即跳至1动画末位置并执行2.stop(true)全部停止。

猜你喜欢

转载自blog.csdn.net/lily__an/article/details/89278135