该博客主要展示了使用jQuery实现元素显示、隐藏及动画效果的代码示例。包括点击元素隐藏、在显示和隐藏间切换、淡入淡出、滑动等效果，通过不同的HTML元素和按钮触发相应操作，体现了jQuery在前端交互中的应用。
//改为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>
扫一扫
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
