jQuery Easing 动画效果扩展

前端开发仓库

jQuery 的动画的 easing 参数,默认只提供 "linear" 和 "swing"(默认值),足够日常的任务需求使用,但是当我们需要更好玩的过渡效果时,就可以使用这个扩展插件!

示例

选择效果:
单击查看效果

使用方法

载入 JavaScript 文件

<script src='jquery.js'></script>
<script src='jquery.easing.1.3.js'></script>

覆盖默认方法

这样简单定义,可以覆盖 jQuery 的 easing 默认值 "swing"。

jQuery.easing.def = "string";

习惯的方法

这个方法和原来 jQuery 的方法一样,很简单,推荐使用这种方法

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

$(element).animate({
  width: 200,
  height: 200
},{
  duration: 1000,
  easing: method,
  complete: callback
});

如果你使用 jQuery 1.4 以上的版本,还可以这样:

$(element).animate({
  width:[200, 'easeInOutBack'],
  height:[200, 'easeOutBack']
},1000);

相关信息

来源:
http://gsgd.co.uk/sandbox/jquery/easing/
授权协议:
BSD