文档章节

animate

樱楹123
 樱楹123
发布于 2016/05/27 17:25
字数 489
阅读 10
收藏 0

改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({height:"300px"}); });

定义和用法 animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。 只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。 注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。 语法 1 $(selector).animate(styles,speed,easing,callback) 参数 描述 styles 必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值(提供实例): backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。 speed 可选。规定动画的速度。默认是 "normal"。 可能的值: 毫秒 (比如 1500) "slow" "normal" "fast" easing 可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数: swing linear 扩展插件中提供更多 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 函数

© 著作权归作者所有

下一篇: js命名规范
樱楹123
粉丝 1
博文 36
码字总数 13041
作品 0
唐山
私信 提问
jQuery Color Animate (jQuery 颜色变换动画) 插件(字体边框等等)

如果你只是需要颜色变换功能,也不必去花费时间装载一个和jQuery本身几乎一样大的插件。我就没有这么做。好在Edwin Martin为我们提供了单独的jQuery Color Animate插件,js本身很小,只有几行...

尐桀
2012/07/05
558
0
jquery的知识必记点---实现动画效果

1.动画的基础隐藏和显示 1)hide方法 $elem.hide() .hide("fast / slow") 2)show()方法 $('elem').hide(3000).show(3000) 3)隐藏切换toggle方法 如果元素是最初显示,它会被隐藏 如果隐藏的......

一只小YU儿
2017/04/20
0
0
JavaScript强化教程——jQuery动画

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery动画 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法:$(selector).anima...

哟猫Intry
2016/07/04
10
0
jQuery中的animate()de 疑问!

大家好,请问jQuery中的animate()为什么不能多次调用与它相似的函数,比如以下代码,我想让动画向上移动之后又向下移动,来回反复,可是只是执行了一次往复就不会在执行了,这是为什么呢?...

Napoleonqin
2015/08/08
115
1
Jquery工作常用实例——动画功能实现

一:jQuery 函数创建自定义动画的语法: $(selector).animate({params},[duration],[easing],[callback]) 关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性,如下...

Adam-Lee
2011/07/12
230
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot 403 问题

添加WebAppConfigurer 配置 @Configuration@EnableAutoConfigurationpublic class WebAppConfigurer extends WebMvcConfigurerAdapter { public WebAppConfigurer() { } ......

布袋和尚_爱吃鱼
10分钟前
2
0
Python自动更换壁纸爬虫与tkinter结合

直接上代码 import ctypesimport timeimport requestsimport osfrom threading import Threadfrom tkinter import Tk, Label, Button,Entry,StringVar,messagebox# '放到AppData\Roami......

物种起源-达尔文
11分钟前
1
0
Postgresql Study 笔记

Postgresql 安装 Windows, MAC Install Postgresql 下载地址: https://www.enterprisedb.com/downloads/postgres-postgresql-downloads Linux Install sudo apt-get update sudo apt-get in......

slagga
13分钟前
2
0
layer.open 打开新页面传参问题

如图所示,点击出售,把A页面的数据传到弹框上面,因为弹框比较复杂,所以使用引入一个新页面。 A.html a.js B.html b.js 1、第一种方案 sellInte: function (){ var obj = document.g...

木九天
16分钟前
2
0
沙龙报名 | 区块链数据服务技术应用实践

京东云是国内首家提供区块链数据在线分析服务产品的公司,也是行业内首家对区块链数据服务进行开源的公司。 本次沙龙是京东云BDS开源后,首次在深圳举办线下沙龙,我们将邀请京东云BDS团队核...

京东云技术新知
16分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部