众所周知, easing是jquery的一个插件,该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。
但是要注意:因为easing是jQuery的插件,所以必须是在引入jquery
之后
再引入它。
先来看一波效果:
我能这样玩一天有没有~~~
代码如下:
<body>
<h3>点击下面的元素,查看运动效果</h3>
<div class="cont">
</div>
</body>
<script src="../jquery.js"></script>
<script src="../jquery.easing.1.3.js"></script>
<script>
"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".split(",").forEach((val,idx)=>{
$(`<div>${val}</div>`).appendTo($(".cont")).css({
width:200,height:40,
background:"pink",
position:"absolute",
left:0,
top: idx * 50 + 50,
lineHeight:"40px",
textAlign:"center",
borderRadius:"10px"
}).click(function(){
$(this).animate({
left:300
},1000,val);
})
})
</script>