abstract： <!DOCTYPE html> <html> <head> <meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title></title>
<style type="text/css">
div{width: 500px; height: 500px; background: #ddd; font-size: 40px;}
input{width: 100px; text-align: center;}
</style>
</head>
<body>
<input type="text" id="showBtn" value="show">
<input type="text" id="hideBtn" value="hide">
<br>
<input type="text" id="slideDown" value="slideDown">
<input type="text" id="slideUp" value="slideUp">
<input type="text" id="slideToggle" value="slideToggle">
<br>
<br>
<input type="text" id="fadeIn" value="fadeIn">
<input type="text" id="fadeOut" value="fadeOut">
<input type="text" id="fadeToggle" value="fadeToggle">
<input type="text" id="fadeTo" value="fadeTo">
<br>
<br>
<input type="text" id="font36" value="字體變大">
<input type="text" id="t30" value="邊框滑動">
<input type="text" id="vStop" value="停止動畫">
<div style="display: none; position: relative;">自定義邊框動畫效果</div>
<p>自定義動畫效果</p>
<script type="text/javascript">
$(document).ready(function(){
$('#showBtn').click(function(){
$('div').show('slow');//顯示
});
$('#hideBtn').click(function(){
$('div').hide('slow');//隱藏
});
//滑動打開關(guān)閉效果
$('#slideDown').click(function(){
$('div').slideDown('slow');//滑動打開
});
$('#slideUp').click(function(){
$('div').slideUp(1000);//滑動收起
});
$('#slideToggle').click(function(){
$('div').slideToggle(1000);//滑動打開/收起
});
//淡入淡出
$('#fadeIn').click(function(){
$('div').fadeIn('slow');//淡入
});
$('#fadeOut').click(function(){
$('div').fadeOut(1000);//淡出
});
$('#fadeToggle').click(function(){
$('div').fadeToggle(1000);//淡入/淡出
});
$('#fadeTo').click(function(){
$('div').fadeTo(1000,0.7);//fadeTo是淡出到指定的值，必須放兩個(gè)值，函數(shù)可以不用給第一個(gè)值是速度,第二個(gè)值是0-1之間的透明度,
});
//自定義動畫
$('#font36').click(function(){
$('p').animate({fontSize:'36px'},1500)
});
$('#t30').click(function(){
$('div').animate({
left:'600px' ,
width:'200px' ,
height:'200px',
fontSize:'12px'
//width:'goggle',//預(yù)定義值:show,hide,goggle
},1500);
});
$('#vStop').click(function(){
$('div').stop(flase,true);
});
});
</script>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-04-25 13:37:24
Teacher's summary：完成的不錯(cuò)。jq比js簡單很多，多練習(xí)可以代替常規(guī)js。繼續(xù)加油。