可以方便实现DOM元素的隐藏和显示,淡入淡出,位置伸缩变换。
常用两参动画
- 可实现元素淡入淡出,隐藏显示,上下滑动
语法:
$(selector).####(speed,[callback])
selector: 获取的DOM元素,动画效果要作用的对象,
根据方法不同会有所差异。
####: 通用方法名的代替,具体方法名如下
speed: 动画完成的时间
单位毫秒同时也可作使用"slow","fast"
callback: 动画完成之后立即触发的回调函数。
方法:
符合两参型的方法共有一下八个,
分为隐藏显示.上下滑动,淡入淡出
隐藏显示
selector直接作用于要隐藏和显示的元素
show(): 显示获取到的隐藏元素
通常属性具有display:none的元素
hide(): 隐藏获取到的元素
toggle():当执行该语句时,方法会自动判断此时元素的状态,
并状态的切换
上下滑动
selector对用于包裹层(如div),将通过该元素上下滑动
来隐藏和显示里面的元素
slideUp():向上滑动,将隐藏内部元素
slideDown():向下滑动,将显示内部元素
slideToggle():根据现有状态来向上或向下滑动元素
淡入淡出
selector直接作用于要淡入淡出的元素
fadeIn():淡入该元素,页面不再显示
fadeOut():淡出该元素,页面会显示
常用三参动画
- 位置及形状的伸缩变换,以及透明度的指定。
自定义动画效果
$(selector).animate({params},speed,[callback])
语法
selector:直接选定动画要作用的元素
{params}:为制造动画效果的CSS属性名和值
实例:
$("img").animate({
width:"115px",
height:"115px",
left:"+=90px"
},3000,function(){
$("#tip").html("执行完成!")
})
当时img元素的宽度和高度变为115px,并向右90px,
同时在id为tip的内部显示'执行完成!'。
注意:
要实现元素移动时,应设置该元素为
绝对定位或相对定位
属性名不加引号
透明度的指定
$(selector).fadeTo(speed,opacity,[callback])
语法:
selector:直接作用于要改变透明度的元素
opacity:0.0-1.0之间的任意数值
延迟与停止
- 在动画的执行时,可随时取消或延迟一定时间的在执行
停止
$(selector).stop([clearQueue],[goToEnd])
语法
selector:正在执行动画的元素
一般不加参数,直接调用即可
延迟
$(selector).delay(duration)
语法
selector:正在执行动画的元素
duration:延迟时间单位毫秒
实例
$("img").delay(1000)
精彩回顾
1.
$("img").animate({
width:"115px",
height:"115px",
left:"+=90px"
},3000,function(){
$("#tip").html("执行完成!")
})
该对象实现绝对定位(position:absolute)或相对定位(position:relative)
2.回调函数中来嵌套动画方法来实现链式运动。
3.注意:实现动画的方法中的延迟时间,都不加引号
热门评论
来过
111
刚看完锋利的jQuery动画章节,受教了