jQuery Easing.js 插件的简单使用
==介绍:==easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果。
==环境:==因为easing是jQuery的插件,所以必须是在引入jquery之后再引入它
简单的写法
$(".car").animate({"left": "150%"}, 4000, "easeInElastic", function() {});
复制代码
easing:格式为json,{ duration: 持续时间, easing: 过渡效果, complete: 成功后的回调函数}
示例:
$(element).animate({
height:500,
width:600
},{
easing: 'easeInOutQuad',
duration: 500,
complete: function(){}
});
复制代码
easing常见的值如下:
- 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
不同值得图示:
转载于:https://juejin.im/post/5cfbb1edf265da1bbd4b6771