abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>事件切換</title>
<style>
.d1{width: 100px;height: 400px;background: cyan;float: left;margin-right: 20px;}
.d2{width: 100px;height: 400px;background: blue;float: left;margin-right: 20px;}
.d3{width: 100px;height: 400px;background: red;float: left;margin-right: 20px;}
.d4{width: 100px;height: 400px;background: yellow;float: left;margin-right: 20px;}
.d5{width: 100px;height: 400px;background: coral;float: left;margin-right: 20px;}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<button class="bt1">隱藏</button>
<button class="bt2">顯示</button>
<button class="bt3">向下</button>
<button class="bt4">向上</button>
<button class="bt5">切換隱藏</button>
<button class="bt6">切換slide</button>
<button class="bt7">淡入</button>
<script>
$(function(){
//隱藏
$('.bt1').click(function(){
$('.d1').hide()
})
//顯示
$('.bt2').click(function(){
$('.d1').show()
})
//向下
$('.d2').hide()
$('.bt3').click(function(){
$('.d2').slideDown(500)
})
//向上
$('.bt4').click(function(){
$('.d2').slideUp(500)
})
//切換
$('.bt5').click(function(){
$('.d3').toggle(500)
})
$('.bt6').click(function(){
$('.d4').slideToggle(500)
})
//淡出
$('.bt7').click(function(){
$('.d5').fadeOut(500)
})
})
</script>
</body>
</html>
Correcting teacher：韋小寶Correction time：2019-02-28 13:05:36
Teacher's summary：寫的很不錯(cuò) 這些事件在實(shí)際的開發(fā)中都會(huì)經(jīng)常使用到的 一定要多去練習(xí)哦