$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
定义和用法
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。
语法 1
$(selector).animate(styles,speed,easing,callback)
参数
描述
styles |
必需。规定产生动画效果的 CSS 样式和值。
可能的 CSS 样式值(提供实例):
注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。
|
speed |
可选。规定动画的速度。默认是 "normal"。
可能的值:
- 毫秒 (比如 1500)
- "slow"
- "normal"
- "fast"
|
easing |
可选。规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数:
扩展插件中提供更多 easing 函数。
|
callback |
可选。animate 函数执行完之后,要执行的函数。
如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。
|
语法 2
$(selector).animate(styles,options)
参数
描述
styles |
必需。规定产生动画效果的 CSS 样式和值(同上)。 |
options |
可选。规定动画的额外选项。
可能的值:
- speed - 设置动画的速度
- easing - 规定要使用的 easing 函数
- callback - 规定动画完成之后要执行的函数
- step - 规定动画的每一步完成之后要执行的函数
- queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
- specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
|
分享到:
相关推荐
fullpage.js结合animate.css实现滚屏动画,每段代码都加有详细注释 文章地址:https://blog.csdn.net/cplvfx/article/details/80649574
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
javascript animate options动画参数
animate动画特效重复调用animate动画特效重复调用animate动画特效重复调用
css动画效果 wow插件需要的wow.min.js和animate.css
原生js对页面元素进行移动等平滑动画操作,适合轮播等需要对元素实现滑动效果的页面。链式调用,可以实现同元素不同方向同时进行动画。内置多队列,多个对相同元素和相同方向(或只有相同元素)调用将等待上一个动画...
实现效果: 基于animate.css和原生JS实现的鼠标滚动动画效果,挺不错的CSS3动画效果,基于CSS动画插件 animate.css实现,animate.css拥有众多的动画特效而且是开源的,大家到官网看看吧。
Mapboxgl实现点animate动画效果
当我们需要编写动画效果时,就需要引入第三方动画库,animate.css 和velocity.js是必要引入的!
js+animate.css实现移动端带有动画效果dialog的思路,配有移动端适配的方法。 适合刚接触移动端前端开发人员。
基于animate.css和原生JS实现的鼠标滚动动画效果,挺不错的CSS3动画效果,基于CSS动画插件 animate.css实现,animate.css拥有众多的动画特效而且是开源的,大家到官网看看吧。
animate的源代码,在使用时可以直接引用,方便易用,实现各种过渡动画
jQuery的数字动画插件,增加了“数”属性和阶跃函数jQuery的动画功能特性。
页面的动画引入资源,让页面动起来
Saola Animate拥有强大的内置代码编辑器和智能功能,让您快速创建和编辑JS功能。JavaScript API也可以随时为您提供支持。 11、HTML5 通过动态的,互动的,引人入胜的网页内容将您的想法变为现实。HTML5及其广泛的...
jQuery+animate.css自定义弹窗动画插件,带有多种弹窗方式,具体看下方说明。
javascript 重写了jquery中的animate的动画方法,为不用jquery的同学们提供的便利
HTML5技术,用javascript的animate函数做出小米小盒子展开效果。将一个完整的盒子分零件展开。效果如URL:http://www.mi.com/hezimini/config/
// animate(my$("dv"),json2,function(){按照此格式多次重复添加动画将会顺序执行} ); // }); // }; function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是...
1:网站页面滚动效果文件分为两个分别是:1、单页面如何使用 2、 vue中如何使用使用 2:文件包括animate.css 和 wow.js 3:点击dome.html直接运行 4:css动画基于animate.css的样式,当然也可以自己写@keyframes