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>
类似资料：