JQuery学习笔记(三)——animate() 方法

jQuery 效果 - animate() 方法

实例

改变 "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 函数

以上摘自：http://www.w3school.com.cn/jquery/effect_animate.asp

实例：原来样式

目标样式

左边div 为ui-center，右边为ui-east html简化如下：

<div class="ui-east fn-hide" style="width:500px;border-left:0;padding-top:10px;"><div class="ui-east-area"></div></div>

<div class="ui-center" style="width:1270px;padding:0;"></div>

css样式如下：

.ui-center {  overflow-y: auto;  position: relative;}.ui-east {  float: right;  border-left: 1px solid #d3d3d3;  background-color: #fff;  /* background-color: #f5f5f5; */  overflow: auto;  width: 200px;  position: relative;}

jquery如下

$(".ui-fold").click(function(){var str=$(this).attr("class");if(str=="ui-fold"){$(this).addClass("ui-fold-opening");$(this).animate({left:"750px"});$(".ui-center").animate({width:"760px"},function(){$(".ui-east").removeClass("fn-hide");});}else{$(this).removeClass("ui-fold-opening");$(this).animate({left:"1260px"});$(".ui-center").animate({width:"1270px"});$(".ui-east").addClass("fn-hide");}});

因为，east是float：right。故，不能如下写：

$(".ui-center").animate({width:"760px"});<pre name="code" class="javascript">$(".ui-east").removeClass("fn-hide");

因为，animate方法，是渐变效果。而ui-east是突然，出现，会造成。ui-center先下沉，再上浮的现象。故需要使用callback方法，实现效果。