摘要：<!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:動畫完成時執(zhí)行的一個函數(shù) -->
<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中文網(wǎng)</p>
<p>PHP中文網(wǎng)</p>
<p>PHP中文網(wǎng)</p>
<p>PHP中文網(wǎng)</p>
<p>PHP中文網(wǎng)</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 參數(shù)定義形成動畫的 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
老師總結：自定義動畫功能強大, 大多數(shù)場景, 預置的動畫也能滿足的情況下, 盡可能使用預定義的