支持5种炫酷动画类型的jQuery插件-EnlivenTricks.js

支持5种炫酷动画类型的jQuery插件-EnlivenTricks.js

EnlivenTricks.js是一款支持5种炫酷动画类型的jQuery插件。该jQuery插件支持淡入淡出、抖动、缩放、平移和loading等5种动画。

使用方法
在页面中引入EnlivenTricks.css、jquery和EnlivenTricks.js文件。

1
2
3
<link href="dist/bootstrap.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="EnlivenTricks.js"></script>

淡入淡出动画

1
2
3
4
5
$('.element').FadeTrick({
  duration: 500,
  disappear: false,
  mode: 'in'
})
  • duration:动画的持续时间。
  • disappear:是否在淡出之后移除元素。
  • mode:淡入或淡出。

抖动动画

1
2
3
4
$('.element').ShakeTrick({
  times: 6
  wrapper: false
})
  • times:抖动的次数。
  • wrapper:包裹元素。

缩放动画

1
$('.element').BlobTrick()

平移动画

1
2
3
4
5
6
$('.element').SwapTrick({
  revert: false,
  vertical: false,
  next: null,
  callback: function() {return;}
})
  • revert:恢复动画。
  • vertical:垂直还是水平动画。
  • next:下一个移动的元素。
  • callback:回调函数。

loading动画

1
2
3
4
5
6
$('.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',或一个函数。
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论