鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > cms安装教程 > 科汛cms > >

jquery插件之easing使用,教程,在线动画效果查看

来源:互联网 作者:佚名 时间:2015-01-06 16:02
jqueryeasing在线演示地址:/jQuery.easing.html script $(function(){ $.easing.def=

jqueryeasing在线演示地址:/jQuery.easing.html

 

<script> $(function(){ $.easing.def="easeInQuad";//设置默认效果 var callback=function (){ alert("ok"); } $("#t1").animate({ "top":600 },{duration: 3000, easing:"easeInQuad",//可省略 complete: callback}) }) </script>

 

使用了easing后,JQ原来的方法有将不可用,用对象代替JQ中时间,该对象如下例
{duration: 3000,easing:"easeInQuad",complete: callback}
原JQ的回调函数由complete代替
如果不使用easing,即时间参数不为上面对象所代替,保留原有功能
即加载EASING后仍可以如下使用

<script> var callback=function (){ alert("ok"); } $("#t1").hide(3000,callback) </script>

具体参数细节:
duration 选项:
毫秒数
complete 选项:
完成后调用
easing 选项:
jswing
def
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

官方网站

在线演示地址:/jQuery.easing.html

 

 

网友评论
<