摘要： <!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');//隐藏
});
//滑动打开关闭效果
$('#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是淡出到指定的值，必须放两个值，函数可以不用给第一个值是速度,第二个值是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',//预定义值:show,hide,goggle
},1500);
});
$('#vStop').click(function(){
$('div').stop(flase,true);
});
});
</script>
</body>
</html>
批改老师：查无此人批改时间：2019-04-25 13:37:24
老师总结：完成的不错。jq比js简单很多，多练习可以代替常规js。继续加油。
