文章是从官网整理,方便学习可以随意装载不需要注明作者!
1基本效果
1,show() 显示隐藏的匹配元素
语法: $("p").show()
2,show(speed,fn),可控速度的显示隐藏的元素
语法: $("p").show("fast",function(){
$(this).text("Animation Done!");
});
fast可以改成以毫秒为单位的数字,eg 3000
3,hide() 隐藏显示的匹配元素
语法: $(“p”).hide()
4,hide(speed,fn).可控速度的隐藏显示元素
语法: $("p").hide("fast",function(){
$(this).text("Animation Done!");
});
5,toggle() 切换元素的可见状态,隐藏就显示,显示就隐藏
语法: $("p").toggle()
6,toggle(switch)根据switch的参数切换元素的可见状态(true为可见,false为隐藏)
Eg:var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
7,toggle(speed,fn) 可控的切换所有的匹配元素
语法 :$("p").toggle("fast",function(){
alert("Animation Done.");
});
2 滑动效果
1slideDown(speed,fn)是元素向下移动,在显示完成时触发一个回调函数
语法:$("p").slideDown("fast",function(){
alert("Animation Done.");
});
2 slideUp(speed,fn)使元素向上移动,先移动完成时触发一个回调函数
语法:$("p").slideUp("fast",function(){
alert("Animation Done.");
});
3 slideToggle(speed,fn) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后
可选地触发一个回调函数。
3淡入淡出效果
1fadeIn(speed,fn)通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成
后可选地触发一个回调函数。
语法:$("p").fadeIn("fast",function(){
alert("Animation Done.");
});
2fadeOut(speed,fn)和前一个相反的效果
语法:$("p").fadeOut("fast",function(){
alert("Animation Done.");
});
3fadeTo(speed,opacity,fn)调到一个指定的透明度
语法:$("p").fadeTo("fast", 0.25, function(){
alert("Animation Done.");
});
4,自定义动画
1,animate(params,duration,easing,fn)用于创建自定义动画的函数
Eg $("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
2,stop(clearQueue,gotoEnd) 停止所有指定元素上正在进行的动画
Eg // 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
3,delay (duration,queueName)
Eg $('#foo').slideUp(300).delay(800).fadeIn(400);