一 ***显示隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button> <button id="btn3">显示/隐藏切换</button>
<br/>
<img src="img/dog1.png" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
$('img').hide(3000);//隐藏
})
$('#btn2').click(function(){
$('img').show(3000); //显示
})
//简写为1个
$('#btn3').click(function(){
$('img').toggle();// 自动切换显示隐藏效果
})
})
</script>
</body>
</html>
二 **** 上划下划
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{width: 200px;height: 200px;background-color: red;}
</style>
</head>
<body>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button> <button id="btn3">显示/隐藏切换</button>
<br/>
<div></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
$('div').slideUp(2000);//上滑
})
$('#btn2').click(function(){
$('div').slideDown(2000); //下滑
})
//简写为1个
$('#btn3').click(function(){
$('div').slideToggle();// 切换
})
})
</script>
</body>
</html>
三 **** 淡入淡出<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{width: 200px;height: 200px;background-color: red;}
</style>
</head>
<body>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button> <button id="btn3">显示/隐藏切换</button>
<br/>
<div></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
$('div').fadeOut(5000);//淡出
})
$('#btn2').click(function(){
$('div').fadeIn(5000); //淡入
})
//简写为1个
$('#btn3').click(function(){
$('div').fadeToggle();// 切换
})
})
</script>
</body>
</html>
显示效果
隐藏的效果
网友评论