abstract：<!DOCTYPE html><html><head> <title>jQuery动画效果</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画效果</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 1. 点击隐藏 $('selected').hide(speed,callback)
// 可选的speed的参数规定 隐藏 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可选的callback参数是 隐藏 完成后执行的函数
// $('#hide').click(function(){
// $('p').hide("slow");
// });
// 2. 点击显示 $('selected').show(speed,callback)
// 可选的speed的参数规定 显示 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可选的callback参数是 显示 完成后执行的函数
// $('#show').click(function(){
// $('p').show("fast");
// });
// 3. 向下滑动元素 $('selected').slideDown(speed,callback)
// 可选的speed的参数规定 下滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可选的callback参数是 下滑 完成后执行的函数
// $('#flip').click(function(){
// $('#panel').slideDown(1000,function(){
// $('#flip').hide(); // 滑动完成后将id="flip"的元素隐藏
// });
// });
// 4. 向上滑动元素 $('selected').slideUp(speed,callback)
// 可选的speed的参数规定 上滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可选的callback参数是 上滑 完成后执行的函数
// $('#flip-1').click(function(){
// $('#panel-1').slideUp('fast');
// });
// 5. 向上滑动元素 $('selected').slideToggle(speed,callback)
// 可选的speed的参数规定 上下滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"
// 可选的callback参数是完成后执行的函数
// 此方法可以向上向下滑动功能.
// $('.flip').click(function(){
// $('.panel').slideToggle(1000);
// });
// 6. fadeIn() 用于 淡入 已隐藏的元素 $('selected').fadeIn(speed,callback)
// 可选的speed参数规定效果的时长 它可以取以下值:"slow" "fast"或 毫秒"1000"
// 可选的callback参数是 fadeIn 完成后执行的函数
// $('#btn1').click(function(){
// $('#div1').fadeIn('fast');
// $('#div2').fadeIn('slow');
// $('#div3').fadeIn(3000);
// });
// 7. fadeOut() 用于 淡出 已隐藏的元素 $('selected').fadeOut(speed,callback)
// 可选的speed参数规定效果的时长 它可以取以下值:"slow" "fast"或 毫秒"1000"
// 可选的callback参数是 fadeOut 完成后执行的函数
// $('#btn2').click(function(){
// $('#div4').fadeOut('fast');
// $('#div5').fadeOut('slow');
// $('#div6').fadeOut(3000);
// });
// 8. $('selected').fadeToggle(speed,callback) 用于在fadeIn() 与 fadeOut之间进行切换
// 可选的speed参数规定效果的时长 它可以取以下值:"slow" "fast"或 毫秒"1000"
// 可选的callback参数是 fadeing 完成后执行的函数
// $('#btn3').click(function(){
// $('#div7').fadeToggle(3000);
// $('#div8').fadeToggle('slow');
// $('#div9').fadeToggle('fast');
// });
// 9. $('selected').fadeTo() 允许渐变给定的不透明度(值介于0与1之间)
// 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
// 可选的 callback 参数是该函数完成后所执行的函数名称。
// $('#btn4').click(function(){
// $('#div10').fadeTo('slow', 0.15);
// $('#div11').fadeTo('slow', 0.8);
// $('#div12').fadeTo('slow', 0.4);
// });
// 10. $('selected').animate({params},speed,callback);
// 必需的 params 参数定义形成动画的 CSS 属性。
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是动画完成后所执行的函数名称。
// $('#btn5').click(function(){
// $('#div13').animate({left:'250px'},'slow');
// });
// 操作多个属性
// $('#btn5').click(function(){
// $('#div13').animate({left:'250px',opacity:'0.5',height:'150px',width:'150px',borderRadius:'50%'},'slow');
// });
// 使用相对值
// $('#btn5').click(function(){
// $('#div13').animate({left:'250px',height:'+=150px',width:'+=150px'},'slow');
// });
// 使用预定义的值 ,可以把属性的动画值设置为"slow" "hide" "toggle"
// $('#btn5').click(function(){
// $('#div13').animate({height:'toggle'},'slow');
// });
// 使用队列功能
$('#btn5').click(function(){
var div = $('#div13');
div.animate({height:'300px',opacity:'0.4'},'slow');
div.animate({width:'300px',opacity:'0.8'},'slow');
div.animate({height:'100px',opacity:'0.4'},'slow');
div.animate({width:'100px',opacity:'0.8'},'slow');
});
});
</script>
<style type="text/css">
#panel, #flip{padding: 5px;text-align: center;background: #FF6700;border: 1px solid #c3c3c3;}
#panel{padding: 50px;display: none;}
#panel-1, #flip-1{padding: 5px;text-align: center;background: #FF6700;border: 1px solid #c3c3c3;}
#panel-1{padding: 50px;}
</style>
</head>
<body>
<p>点击"隐藏"我将会消失,点击"显示"我将会出来</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<hr>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello World!</div>
<hr>
<div id="flip-1">点我收起面板</div>
<div id="panel-1">Hello World!</div>
<hr>
<div id="flip-1" class="flip">点我 "下滑" 或者 "上滑"</div>
<div id="panel-1" class="panel">Hello World!</div>
<hr>
<button id="btn1">点击淡入 div 元素</button>
<div id="div1" style="width:80px;height:80px;display:none;background-color:skyblue;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:lightblue;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:gray;"></div>
<hr>
<button id="btn2">点击淡出 div 元素</button>
<div id="div4" style="width:80px;height:80px;background-color:skyblue;"></div><br>
<div id="div5" style="width:80px;height:80px;background-color:lightblue;"></div><br>
<div id="div6" style="width:80px;height:80px;background-color:gray;"></div>
<hr>
<button id="btn3">点击淡入\淡出 div 元素</button>
<div id="div7" style="width:80px;height:80px;background-color:skyblue;"></div><br>
<div id="div8" style="width:80px;height:80px;background-color:lightblue;"></div><br>
<div id="div9" style="width:80px;height:80px;background-color:gray;"></div>
<hr>
<button id="btn4">点击我让颜色变淡</button>
<div id="div10" style="width:80px;height:80px;background-color:blue;"></div><br>
<div id="div11" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div12" style="width:80px;height:80px;background-color:green;"></div>
<hr>
<button id="btn5">开始动画</button>
<!-- 默认情况下html元素为静态,而且不可移动的 需要设置相对定位或者绝对定位 固定定位 -->
<div id="div13" style="width: 100px;height: 100px;background: #ff6700;position: absolute;"></div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-02-12 14:27:17
Teacher's summary：完成的不错，学到这里，你的jQuery应该都会了，可以学新知识了。加油
