Jquery使用控制Div动画显示、隐藏

一共有四种基础的显示方式

有最普通的弹出式，有下拉式和渐进渐出式等

直接上代码：

<html>
<head>
<title>Jquery-Div动画显示</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
body{
font-family:"宋体";
font-size:13px;
color:#415973;
}
#ShowDiv{
display:none;
300px;
height:100px;
border:1px solid #ccc;
border-right:2px solid #888;
border-bottom:2px solid #888;
background-color:#f9f9f9;
text-align:center;
padding-top:30px;
}
</style>

//动画显示-1
$(function(){
$("#ShowButton_1").click(
function(){
     if($("#ShowDiv").css("display")=='none'){
$("#ShowDiv").show(1000);
$("#ShowDiv").html("show(1000)<br>hide(1000)");
     $("#ShowButton_1").val("隐藏");
     }
     else{
$("#ShowDiv").hide(1000);
     $("#ShowButton_1").val("显示");
     }
});
});

//动画显示-2
$(function(){
$("#ShowButton_2").click(
function(){
     if($("#ShowDiv").css("display")=='none'){
$("#ShowDiv").slideDown();
$("#ShowDiv").html("slideDown()<br>slideUp()");
     $("#ShowButton_2").val("隐藏");
     }
     else{
$("#ShowDiv").slideUp();
     $("#ShowButton_2").val("显示");
     }
});
});

//动画显示-3
$(function(){
$("#ShowButton_3").click(
function(){
     if($("#ShowDiv").css("display")=='none'){
$("#ShowDiv").fadeIn(2000);
$("#ShowDiv").html("fadeIn()<br>fadeOut()");
     $("#ShowButton_3").val("隐藏");
     }
     else{
$("#ShowDiv").fadeOut(2000);
     $("#ShowButton_3").val("显示");
     }
});
});

</script>
</head>
<body>
普通显示&nbsp&nbsp&nbsp<input type="button" id="ShowButton" name="ShowButton" value="显示"><br>
动画显示-1&nbsp<input type="button" id="ShowButton_1" name="ShowButton_1" value="显示"><br>
动画显示-2&nbsp<input type="button" id="ShowButton_2" name="ShowButton_2" value="显示"><br>
动画显示-3&nbsp<input type="button" id="ShowButton_3" name="ShowButton_3" value="显示"><br>
<div id="ShowDiv" name="ShowDiv">
</div>
</body>
</html>

注释：对以第一个函数，普通显示，还可以换用toggle()

toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

//普通显示
$(function(){
$("#ShowButton").click(
function(){
$("#ShowDiv").toggle();
});
});