本文主要是介绍jquery.easing.js的使用示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
请在这里查看示例 ☞ easing示例
本插件是在jquery原有的动画基础上的拓展
可供选择的效果有匀速运动、变加速运动、缓冲波动效果：
linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine， easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce
以下贴上简单代码示例：
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>demo</title> <script src="../js/jquery-1.11.3.min.js"></script> <script src="js/jquery.easing.min.js"></script>
</head>
<style> * { padding: 0; margin: 0; } .div1,.div2 { width: 100px; height: 100px; background: red; margin: 5px; cursor: pointer;}
</style>
<body> <p>点击下面块查看效果</p><div class="div1">1</div> <div class="div2">2</div> <script> //示例1--点击使用easing效果，支持jquery内置效果 $(".div1").click(function() { $(this).slideUp({ duration: 1000, easing: "easeInOutBack"//easing.js扩展效果 }) }) //示例2--点击在animate基础上拓展效果 $(".div2").click(function() { $(this).animate({ width: 300 },{ easing: "easeInOutBack", complete: function() {//回调函数 $(this).animate({ height: 200 },{ easing: "easeOutBounce" }) } }) })
</script>
</body>
</html>这篇关于jquery.easing.js的使用示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
