动画:
show(时间,fn):显示,在效果完成之后,会执行fn;
hide时间(时间,fn):隐藏,在程序执行完成之后,会执行fn;
toggle:切换
<head>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div></div>
<input type="button" value="show" id="d1">
<input type="button" value="hide" id="d2">
<input type="button" value="toggle" id="d3">
<script type="text/javascript">
$("#d1").click(function(){
$("div").show();
});
$("#d2").click(function(){
$("div").hide();
});
$("#d3").click(function(){
$("div").toggle();
});
</script>
</body>
滑动:
slideDown(时间,fn):下拉;
slideUp(时间,fn):收起;
slideToggle(时间,fn):切换效果;
<body>
<div></div>
//slideDone:下滑,显示
//slideUp:收起
//slideToggle:切换
<input type="button" value="slideDown" id="d1">
<input type="button" value="slideUp" id="d2">
<input type="button" value="slideToggle" id="d3">
<script type="text/javascript">
$("#d1").click(function(){
$("div").slideDown();
});
$("#d2").click(function(){
$("div").slideUp();
});
$("#d3").click(function(){
$("div").slideToggle();
});
</script>
</body>
淡入淡出:
fadeln:淡入;
fadeOut:淡出;
fadeToggle:切换;
fadeTo(3000,(0-1),fn):淡入淡出效果/程度;
<body>
<div></div>
//slideDone:下滑,显示
//slideUp:收起
//slideToggle:切换
<input type="button" value="fadeIn" id="d1">
<input type="button" value="fadeOut" id="d2">
<input type="button" value="fadeToggle" id="d3">
<input type="button" value="fadeTo" id="d4">
<script type="text/javascript">
$("#d1").click(function(){
$("div").fadeIn();
});
$("#d2").click(function(){
$("div").fadeOut();
});
$("#d3").click(function(){
$("div").fadeToggle();
});
$("#d4").click(function(){
$("div").fadeTo();
});
</script>
</body>