jquery缓动swingliner控制动画过程不同时刻的速度
2023-06-13 09:15:27 时间
jQuery效果函数(slideUp()、fadeIn()等)和animation()函数都接收另一个用来控制动画过程的速度的参数,这就是缓动(easing),它确定了动画过程不同时刻的速度。例如,将一个元素移过页面的时候,可能让这个元素缓慢地开始移动,然后变得很快,最后随着动画的完成再次慢下来。给动画添加缓动,使得动画在视觉上更有趣且更有动态感。
jQuery只包含了两个缓动方法:swing和linear。linear方法提供了一个稳定的动画,以使得动画的每个步骤都是相同的(例如,如果要让一个元素以逐渐变化的方式穿过屏幕,每一步的距离和前一步都是相同的)。swing要更加动态一些,随着动画的开始变得更加快一些,然后再慢下来。swing是一个常用设置,因此,如果没有指定任何缓动,jQuery会使用swing方法。
对于任何jQuery效果来说,缓动方法是其第二个参数,因此,要使用linear方法将一个元素滑出视线,可以这样编写代码:
复制代码代码如下:
jQuery只包含了两个缓动方法:swing和linear。linear方法提供了一个稳定的动画,以使得动画的每个步骤都是相同的(例如,如果要让一个元素以逐渐变化的方式穿过屏幕,每一步的距离和前一步都是相同的)。swing要更加动态一些,随着动画的开始变得更加快一些,然后再慢下来。swing是一个常用设置,因此,如果没有指定任何缓动,jQuery会使用swing方法。
对于任何jQuery效果来说,缓动方法是其第二个参数,因此,要使用linear方法将一个元素滑出视线,可以这样编写代码:
$("#element").slideUp(1000,"linear");
当使用animate()函数的时候,缓动方法是第三个参数,第一个参数是一个对象直接量,包含了我们想要实现动画的CSS属性;第二个参数是动画的整体速度。例如,要对动画代码使用linear缓动方法,可以像下面这样编写代码:
$("#message").animate(
{
left:"650px",
opacity:.5,
fontSize:"24px"
},
1500,
"linear"
);
然而,并不仅限于使用jQuery所提供的两个缓动方法。使用jQuery插件可以添加一系列的其他的缓动方法。
相关文章
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- jquery选择器用法_jQuery属性选择器
- jquery砸金蛋 高仿阿里旅游砸金蛋详解编程语言
- 替换掉所有图片失效链接的jQuery代码片段详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- jquery实现控制表格行高亮详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- Jquery实战_读书笔记1—选择jQuery
- jquery实现的元素的left增加N像素鼠标移开会慢慢的移动到原来的位置
- jquery导航条的效果(css选择器控制)
- JQuery下的Live方法和$.browser方法使用代码
- JQuery学习笔记nt-child的使用
- jQuery.autocomplete支持中文输入(firefox)修正方法
- 使用jQuery清空file文件域的解决方案
- jQuery中实现动画效果的基本操作介绍
- jquery元素控制(追加元素/追加内容)介绍及应用
- jquery实现textarea输入字符控制(仿微博输入控制字符)
- jquery实现控制表格行高亮实例
- jQuery随便控制任意div隐藏的方法
- JQuery控制内容长度超出规定长度显示省略号