abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title> <title><script src="https://code.jquery.com/jquery-3.1.1.min.js"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> <title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="content">
<button class="btn1">點(diǎn)擊隱藏</button>
<p class="box1">~ 我是hide() ~</p>
</div>
<div class="content">
<button class="btn2">點(diǎn)擊顯示</button>
<p class="box2">~ 我是show() ~</p>
</div>
<div class="content">
<button class="btn3">隱藏\顯示</button>
<p class="box3">~ 我是toggle() ~</p>
</div>
<div class="content">
<button class="btn4">淡入元素</button>
<p class="box4">~ 我是fadeIn() ~</p>
</div>
<div class="content">
<button class="btn5">淡出元素</button>
<p class="box5">~ 我是fadeOut() ~</p>
</div>
<div class="content">
<button class="btn5-1">淡入\淡出</button>
<p class="box5-1">~ 我是fadeToggle() ~</p>
</div>
<div class="content">
<button class="btn6">下滑效果</button>
<p class="box6">~ 我是slideDown() ~</p>
</div>
<div class="content">
<button class="btn7">上滑效果</button>
<p class="box7">~ 我是slideUp() ~</p>
</div>
<div class="content">
<button class="btn7-1">上滑\下滑</button>
<p class="box7-1">~ 我是slideToggle() ~</p>
</div>
<div class="content">
<button class="btn8">動(dòng)畫效果</button>
<p class="box8">~ 我是animate() ~</p>
</div>
<div class="content">
<button class="btn9" id="box">開始動(dòng)畫</button> <button class="btn10" id="box">停止動(dòng)畫</button>
<p class="box9">~ 我是animate() ~</p>
</div>
<div class="content">
<button class="btn11">callBack</button>
<p class="box11">~ 我是callback() ~</p>
</div>
</body>
</html>
<script>
// 1.hide(speed,callback) 隱藏元素
$('.btn1').click(function(){
$('.box1').hide(1000,function(){
$('.btn1').hide();
});
});
// 2.show(speed,callback) 顯示元素
$('.box2').hide();
$('.btn2').click(function(){
$('.box2').show(100);
});
// 3.toggle(speed,callback) 顯示和隱藏元素
$('.btn3').click(function(){
$('.box3').toggle(100);
});
// 4.fadeIn(speed,callback) 淡入元素
$('.box4').hide();
$('.btn4').click(function(){
$('.box4').fadeIn(900);
});
// 5.fadeOut(speed,callback) 淡出元素
$('.btn5').click(function(){
$('.box5').fadeOut(1000);
});
// 6.fadeToggle(speed,callback) 淡出\淡入
$('.btn5-1').click(function(){
$('.box5-1').fadeToggle(1000,function(){
$('.box5-1').css('background','blue');
});
});
// 7.slideDown(speed,callback) 向下滑動(dòng)元素,它可以取以下值："slow"、"fast" 或毫秒
$('.box6').hide();
$('.btn6').click(function(){
$('.box6').slideDown('slow');
});
// 7.slideUp(speed,callback) 向上滑動(dòng)元素,它可以取以下值："slow"、"fast" 或毫秒
$('.btn7').click(function(){
$('.box7').slideUp('fast');
});
// 8.slideToggle(speed,callback) 上下滑動(dòng)元素,它可以取以下值："slow"、"fast" 或毫秒
$('.btn7-1').click(function(){
$('.box7-1').slideToggle(1000);
});
/*
9.animate({params},speed,callback) 動(dòng)畫效果
必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。
*/
$('.btn8').click(function(){
$('.box8').animate({fontSize:'25px'},1500,function(){
$('.box8').css({'color':'yellow','background':'green'});
});
});
$('.btn9').click(function(){
$('.box9').animate({
opacity: '0.3',
top: '200px',
width: '80px',
height: '80px',
lineHeight: '80px',
borderRadius: '50%',
},2000);
});
$('.btn10').click(function(){
$('.box9').stop();
});
$('.box11').hide();
$('.btn11').click(function(){
$('.box11').show(2000,function(){
$('.box11').animate({fontSize:'12px',borderRadius:'50%'},'slow',function(){
$('body').css('background','#05f5e5');
});
});
});
</script>
Correcting teacher：查無此人Correction time：2019-05-22 09:18:42
Teacher's summary：完成的不錯(cuò)?？茨銓懥瞬簧僮鳂I(yè)，繼續(xù)加油。