jQuery easing动画效果扩展

引入Easing js文件

<script src="js/jquery.min.js"></script>

<script src="js/jquery.easing.min.js"></script>

使用jQuery Easing

$(element).slideUp({
  duration: 1000,
  easing: method,
  complete: callback
});

  • 参数duration:定义动画速度,时间越短,运动速度越快。
  • 参数easing:指定动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们是:linear,swing,jswing,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.各动画实际效果请参照演示demo
  • 参数complete:动画结束后回调函数callback,可以自定义动画结束后的调用函数。
时间: 2024-10-05 13:45:56

jQuery easing动画效果扩展的相关文章

jQuery Easing 动画效果扩展 ,全屏滚动案例

http://www.helloweba.com/view-blog-212.html $(element).animate({     height:500,     width:600     },{     easing: 'easeInOutQuad',     duration: 500,     complete: callback }); 参考http://dev.laohu.com/onesdk

jQuery之动画效果show()......animate()

jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1&qu

jquery练习动画效果-show-hide(//为注释内容)

jquery练习动画效果-show-hide代码: <!doctype html> <html> <head> <meta charset="gb2312"> <title>buzhang练习动画效果-show-hide-title</title> <!--引入jquery文件--> <script src="js/jquery-1.11.1.min.js"></s

jquery的动画效果

序言:昨天复习了jQuery的一些事件,今天我打算继续来复习jQuery的动画效果. 用于写一些网页特效:渐变菜单,渐变显示,图片轮播等. 首先当然得引入插件:<script src="jquery/jquery-1.11.1.js"></script> 1.简单的HTML代码 <input type="button" value="show" id="btn1"/><input ty

jQuery基本动画效果

jQuery基本动画效果 1.show() 用于显示页面元素与之相对应的hide() 测试案例: <p title="标题">测试</p> <ul style="display: none"> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> 点击显

jQuery之动画效果

1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1").show(30

学习笔记(四):jQuery之动画效果

1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1").show(30

jquery中动画效果的函数

在jquery中有很多的动画效果,我给大家分享了一下jquery中的动画函数 jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo():把被选元

一步一步学习 JQuery (八) JQuery 的动画效果

常用方法 hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css("display", "none"); show(): 将元素的 display 样式改为先前的显示状态. 以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画. 可以通过制定速度参数使元素动起来. 以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度. fadeIn(),