jquery.easing

easing 是jquery.animate（properties，［duration］，［easing］，［complete］）中的一个属性，用来设定过渡效果的名称。

如果在项目要使用特殊的动画效果，则需要在引入jquery.js 后引入

jquery.easing.js 。

引入之后，easing参数可选的值就有以下32种：

linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

而在项目中一般用不到如此多的效果，所以为了减少代码冗余，我们可以只把需要的几种easing放在js文件中，如下：

$.extend( jQuery.easing ,{

flyFastSlow: function (x, t, b, c, d) {

return -c * ((t=t/d-1)*t*t*t - 1) + b;

}

});

在jquery 1.4中，对animate（）方法进行了扩展，支持为每个属性置顶easing方法：

$(myElement).animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
});

也可以用另外一种写法：

$(myElement).animate({
left: 500,
top: 200
}, {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});

使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果，以下两种方法都可以：

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

转载于:https://my.oschina.net/u/2618661/blog/632315

jquery.easing相关推荐

jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
jquery.easing.js(转)
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
jQuery easing 使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
【看完想不会都难系列教程】 - （1）使用CSS3+JQuery easing 插件制作绚丽菜单
在本教程中,我们将创建一个独特的滑动框导航.这样做可以让有菜单的盒子滑出,并且弹出缩略图.在某些菜单项中我们还包含着有进一步链接的子菜单.取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动. 我们 ...
jquery.easing的使用
下载地址:http://www.jb51.net/jiaoben/32922.html 基本语法:easing:格式为json,{duration:持续时间,easing:过渡效果,complete: ...
jQuery Easing 使用方法及其图解
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
java easing_[Java教程]jQuery Easing 动画效果扩展
[Java教程]jQuery Easing 动画效果扩展 0 2015-11-20 11:00:03 官网:http://gsgd.co.uk/sandbox/jquery/easing/ jQuer ...
jQuery easing
properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "n ...
jQuery Easing 动画效果扩展
官网: http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果, 一款jQuery动画效果扩展增强插件j ...

jquery.easing

jquery.easing相关推荐

最新文章

热门文章