1.基本
show()显示效果
$(document).ready(function(){
$("button").click(function(){
//$(".one").show();
$(".one").show("slow");
});
});
hide()隐藏效果
$(document).ready(function(){
$("button").click(function(){
$(".hello").hide();
//$(".hello").hide("slow");
});
});
toggle()隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示
$(document).ready(function(){
$("button").click(function(){
//$(".one").toggle();
$(".one").toggle("slow");
});
});
<body>
<div>
<p class="one" style="display:none">hello</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div >div
<p class="p1">dp</p>
<p>dp1 <span>sp</span></p>
<p>dp2</p>
</div>
<button >fuzhi</button>
</body>
2.滑动
slideDown()向下显示，slow()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开
$(document).ready(function(){
$("button").click(function(){
//$(".one").slideDown();
$(".one").slideDown("fast");
});
});
slideUp()向上隐藏,hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏
$(document).ready(function(){
$("button").click(function(){
//$(".hello").slideUp();
$(".hello").slideUp("fast");
});
});
slideToggle垂直方向上切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。
$(document).ready(function(){
$("button").click(function(){
//$(".hello").slideToggle();
$(".hello").slideToggle("fast");
});
});
<body>
<div>
<p class="one" style="display:none">hello</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div >div
<p class="p1">dp</p>
<p>dp1 <span>sp</span></p>
<p>dp2</p>
</div>
<button >fuzhi</button>
</body>
3.淡入淡出
fadeIn() 以改变透明度来显示
$(document).ready(function(){
$("button").click(function(){
$(".one").fadeIn();
// $(".one").fadeIn("fast");
});
});
fadeOut() 以改变透明度来隐藏
$(document).ready(function(){
$("button").click(function(){
//$(".hello").fadeOut();
$(".hello").fadeOut("slow");
});
});
fadeToggle() 以改变透明度来切换显示隐藏状态
$(document).ready(function(){
$("button").click(function(){
//$(".hello").fadeToggle();
$(".hello").fadeToggle("slow");
});
});
fadeTo() 由指定的时间将透明度改变到指定的透明度
用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度：
$(document).ready(function(){
$("button").click(function(){
$(".hello").fadeTo("slow",0.55)
});
});
<body>
<div>
<p class="one" style="display:none">hello</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div >div
<p class="p1">dp</p>
<p>dp1 <span>sp</span></p>
<p>dp2</p>
</div>
<button >fuzhi</button>
</body>
4.自定义
animate() 自定义动画，一般来说数字变动都可以用于动画。
语法：animate(params,speed,easing,callback); 样式参数，时间，可选择，函数。其中params要用中括号括起来，可以使用的css样式参数。注意要采用骆驼法则，如font-size要写成fontSize。颜色渐变不支持。样式：backgroundPosition，borderWidth、borderBottomWidth、borderLeftWidth，borderRightWidth，borderTopWidth，borderSpacing，margin，marginBottom，marginLeft，marginRight，marginTop，outlineWidth，padding，paddingBottom，paddingLeft，paddingRight，paddingTop，height，width，maxHeight，maxWidth，minHeight，maxWidth，font，fontSize，bottom，left，right，top，letterSpacing，wordSpacing，lineHeight，textIndent
用500毫秒将one移到left为50的地方并且完全清晰显示出来（透明度为1）：
$(document).ready(function(){
$("button").click(function(){
$(".one").animate({left: 100, opacity: 'show'},500 )
});
});
在600毫秒内切换段落的高度和透明度：
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ height: 'toggle', opacity: 'toggle'}, "slow");
});
});
stop()停止正在执行动画
stop([clearQueue],[gotoEnd]);两个参数均为布尔值，第一个表示，是否停止动画执行、第二个表示，如果停止，是否立即变为执行完成的状态，如果设置为否，则停留在执行一半的状态。
$(document).ready(function(){
$("button").click(function(){
$(".one").show(5000);//此动画正在执行
$(".one").stop();//上一行代码指定的动画停止在一半状态
$(".one").stop(true,true); //停止当前动画，同时动画切换到完成执行状态。
});
});
delay() 延迟执行动画 当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。
$("button").click(function(){
$(".one").show(5000);//此动画正在执行
$(".one").stop();//上一行代码指定的动画停止在一半状态
$(".one").stop(true,true); //停止当前动画，同时动画切换到完成执行状态。
$(".one").delay(3000).hide(3000) //表示在3000毫秒后执行hide(3000);
});
});
在.slideUp() 和 .fadeIn()之间延时3000毫秒:
$(document).ready(function(){
$("button").click(function(){
$(".hello").slideUp(1000).delay(3000).fadeIn(1000);
});
});
<body>
<div>
<p class="one" style="display:none">hello</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div class="d"></div>
<button >fuzhi</button>
</body>