jQuery easing

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

jQuery easing相关推荐

jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
jquery.easing.js(转)
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
jQuery easing 使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
【看完想不会都难系列教程】 - （1）使用CSS3+JQuery easing 插件制作绚丽菜单
在本教程中,我们将创建一个独特的滑动框导航.这样做可以让有菜单的盒子滑出,并且弹出缩略图.在某些菜单项中我们还包含着有进一步链接的子菜单.取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动. 我们 ...
jquery.easing的使用
下载地址:http://www.jb51.net/jiaoben/32922.html 基本语法:easing:格式为json,{duration:持续时间,easing:过渡效果,complete: ...
jQuery Easing 使用方法及其图解
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
java easing_[Java教程]jQuery Easing 动画效果扩展
[Java教程]jQuery Easing 动画效果扩展 0 2015-11-20 11:00:03 官网:http://gsgd.co.uk/sandbox/jquery/easing/ jQuer ...
jQuery Easing 动画效果扩展
官网: http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果, 一款jQuery动画效果扩展增强插件j ...

jQuery easing

jQuery easing 图解

jQuery easing相关推荐

最新文章

热门文章