爱站程序员基地//改为show适用
<!DOCTYPE html>
<html>
<head>
<script src=\”/jquery/jquery-1.11.1.min.js\”>
</script>
<script>
$(document).ready(function(){
$(\”p\”).click(function(){
$(this).hide(\”slow\”);
});
$(\”h1\”).click(function(){
$(this).hide(\”fast\”);
});
$(\”h2\”).click(function(){
$(this).hide(\”normal\”);
});
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。速度slow</p>
<p>也要点击我哦。</p>
<h1>我是H1，速度fast</h1>
<h1>我还是H1,点击隐藏</h1>
<h2>我是H2，速度normal</h2>
</body>
</html>
//toggle 在显示和隐藏之间切换
<!DOCTYPE html>
<html>
<head>
<script src=\”/jquery/jquery-1.11.1.min.js\”></script>
<script type=\”text/javascript\”>
$(document).ready(function(){
$(\”button\”).click(function(){
$(\”p\”).toggle();
});
});
</script>
</head>
<body>
<button type=\”button\”>切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
//hide 和 show
<html>
<head>
<script type=\”text/javascript\” src=\”/jquery/jquery.js\”></script>
<script type=\”text/javascript\”>
$(document).ready(function(){
$(\”#button\”).click(function(){
$(\”p\”).hide();
});
$(\”#nohide\”).click(function(){
$(\”p\”).show();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id=\”button\”>Click me hide</button>
<button id=\”nohide\”>Click me show</button>
</body>
</html>
//fadein/out 淡入淡出
<!DOCTYPE html>
<html>
<head>
<script src=\”/jquery/jquery-1.11.1.min.js\”></script>
<script>
$(document).ready(function(){
$(\”#button\”).click(function(){
$(\”#div1\”).fadeIn();
$(\”#div2\”).fadeIn(\”slow\”);
$(\”#div3\”).fadeIn(3000);
});
$(\”#button1\”).click(function(){
$(\”#div1\”).fadeOut();
$(\”#div2\”).fadeOut(\”slow\”);
$(\”#div3\”).fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button id=\”button\”>点击这里，使三个矩形淡入</button>
<button id=\”button1\”>点击这里，使三个矩形淡出</button>
<br><br>
<div id=\”div1\” style=\”width:80px;height:80px;display:none;background-color:red;\”></div>
<br>
<div id=\”div2\” style=\”width:80px;height:80px;display:none;background-color:green;\”></div>
<br>
<div id=\”div3\” style=\”width:80px;height:80px;display:none;background-color:blue;\”></div>
</body>
</html>
//滑动
<!DOCTYPE html>
<html>
<head>
<script src=\”/jquery/jquery-1.11.1.min.js\”></script>
<script type=\”text/javascript\”>
$(document).ready(function(){
$(\”.flip\”).click(function(){
$(\”.panel\”).slideToggle(\”slow\”);
});
});
</script>
<style type=\”text/css\”>
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<p class=\”flip\”>请点击这里</p>
<div class=\”panel\”>
<p>W3School – 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
</body>
</html>
