jQuery 动画方法

2022-08-26 18:56:08

隐藏与显示（利用了display属性）

hide(); 隐藏如： $("p").hide(); 下同
show(); 显示

淡入与淡出（利用display属性，可设参数设置快慢或时间）

fadeIn(); 淡入已隐藏元素
fadeOut(); 淡出可见元素
fadeToggle(); 在fadeIn()和fadeOut()之间进行切换
fadeTo(); 允许渐变为给定不透明度

fadeTo("slow",0.15)

滑动

slideDown() 下滑
slideUp 上滑
slideToggle() 在上滑和下滑之间切换

自定义动画

animate() 方法用于自定义动画

1 $("button").click(function(){
2     $("div").animate({
3     left:‘250px‘, opacity:‘0.5‘, height:‘150px‘, width:‘150px‘
4     }); 
5 });

stop() 停止动画效果

在动画完成之前，适用于所有jQuery效果函数，包括滑动，淡入淡出和自定义动画。
写在动画之前
- 例如 $("p").stop().slideDown()

回调函数

当前动画100%完成之后执行

1 $("button").click(function(){
2     $("p").hide("slow",function(){
3         alert("段落现在被隐藏了");
4     }); 
5 });

jQuery 动画方法