jQuery学习21---简单动画效果,show,hide,slideUp,slideDown,fadeOut,fadeIn

show(),hide()如果不带参数，则立即显示，或隐藏，如果指定速度参数则会
用指定时间进行动态显示，隐藏，单位为毫秒，也可以使用三个内置的速度
fast(200ms) slow(600ms) normal(400ms)

动画效果还有slideDown,slideUp,fadeOut,fadeIn

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title></title>
<script src="../jquery-1.8.2.js" type="text/javascript"></script>
<style type="text/css">
#d1
{
width:200px;
height:200px;
background-color:red;
}
</style>
<script type="text/javascript">
//show,hide 等价于style="displya:block/none"

$(function()
{
$("#btn1").click(function()
{
$("#d1").show("slow");
});
$("#btn2").click(function()
{
$("#d1").hide();
});
$("#btn3").click(function()
{
$("#d1").toggle();
});
$("#btn4").click(function()
{
$("#d1").slideUp(1000);
});
$("#btn5").click(function()
{
$("#d1").slideDown();
});
$("#btn6").click(function()
{
$("#d1").slideToggle();
});
$("#btn7").click(function()
{
$("#d1").fadeOut();
});
$("#btn8").click(function()
{
$("#d1").fadeIn();
});
$("#btn9").click(function()
{
$("#d1").stop();
});
});
</script>
</head>
<body>
<div id="d1"></div>
<input type="button" id="btn1" value="show" />
<input type="button" id="btn2" value="hide" />
<input type="button" id="btn3" value="toggle" /><br/>
<input type="button" id="btn4" value="slideUp" />
<input type="button" id="btn5" value="slideDown" />
<input type="button" id="btn6" value="slideToggle" /><br/>
<input type="button" id="btn7" value="fadeOut" />
<input type="button" id="btn8" value="fadeIn" />
<input type="button" id="btn9" value="stop" />
</body>
</html>

更多相关文章

随机推荐