从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:
properties
:一组包含作为动画属性和终值的样式属性和及其值的集合
duration(可选)
:动画执行时间,其值可以是三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing(可选)
:要使用的过渡效果的名称,如:linear
或swing
complete(可选)
:在动画完成时执行的函数
其中参数easing
默认有两个效果:linear
和swing
,如果需要更多效果就要插件支持了,jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果
演示地址:https://matthewlein.com/tools/jquery-easing
直接下载
使用方法
1.引入文件
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script type="text/javascript" src='js/jquery.easing.1.3.js'></script>
animate函数使用easing
$('div').animate({'left':300},3000,'easeInOutElastic',function(){
//动画执行完毕回调函数
});
为每个属性指定easing
$('div').animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
效果图解