- properties：一组包含作为动画属性和终值的样式属性和及其值的集合
- duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- easing(可选)：要使用的过渡效果的名称，如："linear" 或"swing"
- complete(可选)：在动画完成时执行的函数
其中参数easing默认有两个效果："linear"和"swing"，如果需要更多效果就要插件支持了，jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果，大家可以点击这里去看每一种easing的演示效果，下面详细介绍下其使用方法及每种easing的曲线图。
引入之后，easing参数可选的值就有以下32种：
- 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
jQuery 1.4版本中对animate()方法，easing的方法进行了扩展，支持为每个属性指定easing方法，详细请参考这里，如：
$(myElement).animate({
left: [500, ‘swing‘],
top: [200, ‘easeOutBounce‘]
});
也可以用另外一种写法：
$(myElement).animate({
left: 500,
top: 200
}, {
specialEasing: {
left: ‘swing‘,
top: ‘easeOutBounce‘
}
});
使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果，以下两种方法都可以：
$(myElement).slideUp(1000, method, callback});
$(myElement).slideUp({
duration: 1000,
easing: method,
complete: callback
});
jQuery easing 图解
以下图解可以让你更容易理解每一种easing的效果
 |
 |
 |
 |
 |
 |
| 1. linear | 2. swing | 3. easeInQuad | 4. easeOutQuad | 5. easeInOutQuad | 6. easeInCubic |
 |
 |
 |
 |
 |
 |
| 7. easeOutCubic | 8. easeInOutCubic | 9. easeInQuart | 10. easeOutQuart | 11. easeInOutQuart | 12. easeInQuint |
 |
 |
 |
 |
 |
 |
| 13. easeOutQuint | 14. easeInOutQuint | 15. easeInExpo | 16. easeOutExpo | 17. easeInOutExpo | 18. easeInSine |
 |
 |
 |
 |
 |
 |
| 19. easeOutSine | 20. easeInOutSine | 21. easeInCirc | 22. easeOutCirc | 23. easeInOutCirc | 24. easeInElastic |
 |
 |
 |
 |
 |
 |
| 25. easeOutElastic | 26. easeInOutElastic | 27. easeInBack | 28. easeOutBack | 29. easeInOutBack | 30. easeInBounce |
 |
 |
||||
| 31. easeOutBounce | 32. easeInOutBounce |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹跳</title>
<link rel="stylesheet" href="css/demo.css">
<script src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script src="js/demo.js"></script>
</head>
<body>
<div style="width: 80%;margin: 40px auto;padding: 10px;">
<div class="item">
<div id="item-container" class="item-container"></div>
<div id="item-shadow" class="item-shadow"></div>
</div>
<div class="item">
<div class="item-container"></div>
<div class="item-shadow"></div>
</div>
</div>
</body>
</html>
demo.css
jquery.easing.1.3.js
demo.js
分类: JavaScript
原文地址：https://www.cnblogs.com/my2018/p/10552277.html
时间： 2024-11-10 15:04:32