DIV显示和隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV显示和隐藏</title>
</head>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<style type="text/css">
#div1{
height:20px;
width:20px;
background-color:red;
}
#div2{
height:200px;
width:200px;
background-color:blue;
clear:both;
}
#btn1,#info{
float:left;
margin-top:20px;
margin-bottom:20px;
}
</style>

<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//$("#div1").animate({width:500,height:500},2000);
$("#div1").animate({width:100},2000).animate({height:100},2000);
});
});

/* $(function(){
$("#btn1").click(function(){
if($("#div2").css("display")=="none")
{
$("#info").html("正在显示。。。");
$("#div2").show(8000,function(){
$("#info").html("显示完毕！");
});
}
else
{
$("#info").html("正在隐藏。。。");
$("#div2").hide(8000,function(){
$("#info").html("隐藏完毕！");
});
}
});
}); */

$(function(){
$("#btn1").click(function(){
var msg1,msg2;
if($("#div2").css("display")=="none")
{
msg1="正在显示。。。";
msg2="显示完毕！";
}
else
{
msg1="正在隐藏。。。";
msg2="隐藏完毕！";
}
$("#info").html(msg1);
$("#div2").toggle(2000,function(){
$("#info").html(msg2);
});
});
});

/**
* slideUp :向上滑动隐藏对象和 slideDown：向下滑动显示对象

slideToggle：滑动实现对象的隐藏与显示切换

fadeIn：淡入和 fadeOut：淡出
fadeTo 切换到一个指定的透明度：0表示彻底透明，1表示不透明
*/
</script>

<body>
<input type="button" value="测试" id="btn">
<div id="div1"></div>
<input type="button" value="切换" id="btn1">
<div id="info">
</div>
<div id="div2"></div>
</body>

</html>

DIV显示和隐藏

相关推荐