摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>动画效果</title><script src="https://code.jquery.com/jquery-3.4.1.js"></script>&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
div{
width:100px;
height:100px;
background:#00a5e0;
}
</style>
</head>
<body>
<!-- 1.显示隐藏
hide([speed][sesing] [fn])隐藏
show([speed][sesing] [fn])显示
speed:动画时间 sesing:切换效果
fn:动画完成时执行的一个函数 -->
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<div></div>
<hr>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
$('.box1').show(1000);
})
$('#btn2').click(function(){
$('.box1').hide(1000);
})
})
</script>
<!-- 2.滑动
slideDown([speed] [fn])下滑动显示
slideUp([speed] [fn])上滑动隐藏
slideToggle([speed] [fn])切换 -->
<button id="btn3">下滑显示</button>
<button id="btn4">上滑隐藏</button>
<button id="btn5">切换</button>
<p>PHP中文网</p>
<p>PHP中文网</p>
<p>PHP中文网</p>
<p>PHP中文网</p>
<p>PHP中文网</p>
<hr>
<script>
$(document).ready(function(){
$('#btn3').click(function(){
$('.p1').slideDown(2000);
})
$('#btn4').click(function(){
$('.p1').slideUp(2000);
})
$('#btn5').click(function(){
$('.p1').slideToggle(2000);
})
})
</script>
<!-- 3.淡入淡出
fadeIn([speed] [fn])淡入效果
fadeOut([speed] [fn])淡出效果
fadeToggle([speed] [fn])淡入淡出切换
fadeTo([speed] opacity [fn])淡出到指定值 -->
<button id="btn6">淡入</button>
<button id="btn7">淡出</button>
<button id="btn8">切换</button>
<button id="btn9">淡出到指定值</button>
<div></div>
<hr>
<script>
$(document).ready(function(){
$('#btn6').click(function(){
$('.box2').hide();
$('.box2').fadeIn(2000);
})
$('#btn7').click(function(){
$('.box2').fadeOut(2000);
})
$('#btn8').click(function(){
$('.box2').fadeToggle(2000);
})
$('#btn9').click(function(){
$('.box2').fadeTo(2000,0.2);
})
})
</script>
<!-- 4.自定义动画
$(selector).animate({params},speed,fn)开始动画
params 参数定义形成动画的 CSS 属性
$(selector).stop(stopAll,goToEnd)停止动画
stopAll 是否清除动画队列
goToEnd 是否立即完成当前动画 -->
<button id="btn10">开始</button>
<button id="btn11">停止</button>
<div style="position: relative;"></div>
<script>
$(document).ready(function(){
$('#btn10').click(function(){
$('.box3').animate({width:'300px',left:'+500px'},3000);
})
$('#btn11').click(function(){
$('.box3').stop(true);
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
body{
padding:0;
margin:0;
}
ul{
margin:0 auto;
padding:0;
width: 800px;
height:44px;
}
li{
list-style:none;
width:120px;
height:44px;
float: left;
text-align: center;
line-height: 44px;
background: #111;
color:#fff;
font-size: 14px;
}
a{
text-decoration: none;
color:#fff;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$('li').mouseover(function(){
$(this).animate({
opacity:'0.7',
fontSize:'16px'
},300)
})
$('li').mouseleave(function(){
$(this).animate({
opacity:'1',
fontSize:'14px'
},300)
})
})
</script>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MYSQL</a></li>
</ul>
</body>
</html>
批改老师：天蓬老师批改时间：2019-08-20 17:30:12
老师总结：自定义动画功能强大, 大多数场景, 预置的动画也能满足的情况下, 尽可能使用预定义的
