一、基本
show显示隐藏的匹配元素$(".show").click(function(){ // $(".div").show() // $(".div").show("slow") normal fast $(".div").show(1000) })hide隐藏显示的元素
$(".hide").click(function(){ $(".div").hide() })toggle 用于确定显示/隐藏的开关
$(".toggle").click(function(){ $(".div").toggle() })
二、滑动
slideDown 以滑动方式显示隐藏的元素$(".slideDown").click(function(){ $(".div").slideDown() })
$("p").slideDown("slow");slideUp 通过高度变化(向上减小)来动态地隐藏所有匹配的元素
$(".slideUp").click(function(){ $(".div").slideUp()slideToggle 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
$(".slideToggle").click(function(){ // $(".div").stop().slideToggle(3000) 删除所有排队的动画 在最后一此动画基础上,继续新动画 // $(".div").finish().slideToggle(3000) 删除所有排队的动画 完成所有动画 开始新动画 }) $(".slideToggle").click(function(){ $(".div").slideToggle(3000) })
三、淡入淡出
fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。$(".fadeIn").click(function(){ $(".div").fadeIn() })fadeOut 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
$(".fadeOut").click(function(){ $(".div").fadeOut(3000) })fadeToggle 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
$(".fadeToggle").click(function(){ $(".div").fadeToggle() })fadeTo 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
$(".fadeTo").click(function(){ $(".div").fadeTo("normal",0.3) })
四、自定义动画
animate 用于创建自定义动画的函数$(".animate").click(function(){ // $(".div").animate({width:"400px"},1000) // $(".div").animate({width:"400px",height:"400px",opacity:0.3},1000) $(".div").animate({width:"+=40px",height:"+=40px",opacity:0.3},1000) })