带有 CSS3 过渡的 jQuery 动画 DOM 元素 - CSSAnimate

版本:

浏览量:1134

最后更新：2021-09-06

应用标签：MAC 软件 git Jquery插件

推荐指数:

查看演示点击下载

详细信息

jquery.mb.CSSAnimate 是一个 jQuery 插件，用于使用 CSS3 转换而不是默认jQuery.animate()方法来制作动画 DOM 元素。

如果浏览器不支持 CSS3，它会提供对默认 animate 方法的回退。

基本用法：

1. 在您的网页的头部部分包含最新的 jQuery 库、CSSAnimate 和 mb.browser（用于特征检测）

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/inc/jquery.mbBrowser.min.js"></script>
<script src="/path/to/inc/jquery.mb.CSSAnimate.min.js"></script>

2. 使用CSSAnimate方法将自定义动画应用于元素。

opt：包含任何 CSS 转换、转换和过滤器的 CSS 对象。
持续时间：动画持续时间的整数（以毫秒为单位）
延迟：动画延迟的整数（以毫秒为单位）
轻松：轻松 || 线性 || 缓入 || 缓出|| 缓入缓出 || 三次贝塞尔（<数字>，<数字>，<数字>，<数字>）
callback：过渡结束后调用的回调函数

// jQuery(this).CSSAnimate(opt, duration, delay, ease, callback)
element.CSSAnimate({
  top:t,
  left:l,
  width:w,
  height:h,
  transform: 'rotate(50deg) scale(.8)'
  },
  2000,
  100,
  "ease-out",
  callback;
})