小白教程
所有教程
关于
Search
172.69.59.105
172.69.59.105
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Eff animate”的源代码
本页内容
下一节:
Eff_clearqueue
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:animate()}}[[Category:jquery ref effects|1]] = jQuery animate() 方法 = 通过改变元素的高度,对元素应用动画: <sample title="" desc="" lang="html" hererun="1"> $("button").click(function(){ $("#box").animate({height:"300px"}); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#box").animate({height:"300px"}); }); $("#btn2").click(function(){ $("#box").animate({height:"100px"}); }); }); </script> </head> <body> <button id="btn1">使用动画放大高度</button> <button id="btn2">重置高度</button> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> </body> </html> </run> == 定义和用法 == animate() 方法执行 CSS 属性集的自定义动画。 该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。 只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。 '''提示:'''请使用 "+=" 或 "-=" 来创建相对动画。 == 语法 == <pre> (selector).animate({styles},speed,easing,callback)</pre> {| class="table table-striped table-hover" !width="50%"| 参数 !width="50%"| 描述 |- | styles | 必需。规定产生动画效果的一个或多个 CSS 属性/值。 '''注意:''' 当与 animate() 方法一起使用时,该属性名称必须是驼峰写法: 您必须使用 paddingLeft 代替 padding-left,marginRight 代替 margin-right,依此类推。 可以应用动画的属性: * [[try.php?filename=tryjquery_eff_ani_backgroundpositionxy|backgroundPositionX]] * [[try.php?filename=tryjquery_eff_ani_backgroundpositionxy|backgroundPositionY]] * [[try.php?filename=tryjquery_eff_ani_borderwidth|borderWidth]] * [[try.php?filename=tryjquery_eff_ani_borderbottomwidth|borderBottomWidth]] * [[try.php?filename=tryjquery_eff_ani_borderleftwidth|borderLeftWidth]] * [[try.php?filename=tryjquery_eff_ani_borderrightwidth|borderRightWidth]] * [[try.php?filename=tryjquery_eff_ani_bordertopwidth|borderTopWidth]] * [[try.php?filename=tryjquery_eff_ani_borderspacing|borderSpacing]] * [[try.php?filename=tryjquery_eff_ani_margin|margin]] * [[try.php?filename=tryjquery_eff_ani_marginbottom|marginBottom]] * [[try.php?filename=tryjquery_eff_ani_marginleft|marginLeft]] * [[try.php?filename=tryjquery_eff_ani_marginright|marginRight]] * [[try.php?filename=tryjquery_eff_ani_margintop|marginTop]] * [[try.php?filename=tryjquery_eff_ani_outlinewidth|outlineWidth]] * [[try.php?filename=tryjquery_eff_ani_padding|padding]] * [[try.php?filename=tryjquery_eff_ani_paddingbottom|paddingBottom]] * [[try.php?filename=tryjquery_eff_ani_paddingleft|paddingLeft]] * [[try.php?filename=tryjquery_eff_ani_paddingright|paddingRight]] * [[try.php?filename=tryjquery_eff_ani_paddingtop|paddingTop]] * [[try.php?filename=tryjquery_eff_ani_height|height]] * [[try.php?filename=tryjquery_eff_ani_width|width]] * [[try.php?filename=tryjquery_eff_ani_maxheight|maxHeight]] * [[try.php?filename=tryjquery_eff_ani_maxwidth|maxWidth]] * [[try.php?filename=tryjquery_eff_ani_minheight|minHeight]] * [[try.php?filename=tryjquery_eff_ani_minwidth|minWidth]] * [[try.php?filename=tryjquery_eff_ani_fontsize|fontSize]] * [[try.php?filename=tryjquery_eff_ani_bottom|bottom]] * [[try.php?filename=tryjquery_eff_ani_left|left]] * [[try.php?filename=tryjquery_eff_ani_right|right]] * [[try.php?filename=tryjquery_eff_ani_top|top]] * [[try.php?filename=tryjquery_eff_ani_letterspacing|letterSpacing]] * [[try.php?filename=tryjquery_eff_ani_wordspacing|wordSpacing]] * [[try.php?filename=tryjquery_eff_ani_lineheight|lineHeight]] * [[try.php?filename=tryjquery_eff_ani_textindent|textIndent]] '''提示:'''颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色,您需要从 jQuery.com 下载 [http://plugins.jquery.com/project/color 颜色动画插件]。 |- | speed | 可选。规定动画的速度。 可能的值: * 毫秒 * "slow" * "fast" |- | easing | 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。 可能的值: * "swing" - 在开头/结尾移动慢,在中间移动快 * "linear" - 匀速移动 '''提示:'''扩展插件中提供更多可用的 easing 函数。 |- | callback | 可选。animate 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 [[jquery callback|jQuery Callback]] 这一章。 |} == Alternate 语法 == <pre> (selector).animate({styles},{options})</pre> {| class="table table-striped table-hover" !width="50%"| 参数 !width="50%"| 描述 |- | styles | 必需。规定产生动画效果的一个或多个 CSS 属性/值(同上)。 |- | options | 可选。规定动画的额外选项。 可能的值: * speed - 设置动画的速度 * easing - 规定要使用的 easing 函数 * callback - 规定动画完成之后要执行的函数 * step - 规定动画的每一步完成之后要执行的函数 * queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始。 * specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数 |}
返回至“
Eff animate
”。
下一节:
Eff_clearqueue