EnlivenTricks.js是一款支持5种炫酷动画类型的jQuery插件。该jQuery插件支持淡入淡出、抖动、缩放、平移和loading等5种动画。
使用方法
在页面中引入EnlivenTricks.css、jquery和EnlivenTricks.js文件。
<link href="dist/bootstrap.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="EnlivenTricks.js"></script>
淡入淡出动画
$('.element').FadeTrick({ duration: 500, disappear: false, mode: 'in' })
-
duration
:动画的持续时间。 -
disappear
:是否在淡出之后移除元素。 -
mode
:淡入或淡出。
抖动动画
$('.element').ShakeTrick({ times: 6 wrapper: false })
-
times
:抖动的次数。 -
wrapper
:包裹元素。
缩放动画
$('.element').BlobTrick()
平移动画
$('.element').SwapTrick({ revert: false, vertical: false, next: null, callback: function() {return;} })
-
revert
:恢复动画。 -
vertical
:垂直还是水平动画。 -
next
:下一个移动的元素。 -
callback
:回调函数。
loading动画
$('.element').LoadTrick({ color: 'white', appearance: 'simple', position: { left: '42%', right: 0, bottom: 0, top: 0 }, delayHandler: 5000 })
-
color
:动画元素的颜色。 -
appearance
:'square', 'flash', 'disk', 'spinner', 'fixed-spinner', 'classic-spinner', 'simple'。 -
position
:自定义位置。 -
delayHandler
:interger, 'infinite',或一个函数。
EnlivenTricks.js插件的github网址为:https://github.com/hupiat/EnlivenTricks.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!