abstrakt：<!DOCTYPE html /><html> <head> <meta charset="utf-8" /> <title>jquery的動畫效果</title> &nbs
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>jquery的動畫效果</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
}
p{position:absolute;}
.but11{
clear:both;
margin-top:20px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.but1').click(function(){
$('.di1').hide(2000); //隱藏顯示的元素
})
$('.but2').click(function(){
$('.di1').show(2000); //顯示隱藏的元素
})
$('.di2').hide();
$('.but3').click(function(){
$('.di2').slideDown(2000); //向下增大的動態(tài)效果（下滑）
})
$('.but4').click(function(){
$('.di2').slideUp(2000); //向上減小的動態(tài)效果（上滑）
})
$('.but5').click(function(){
$('.di3').slideToggle(2000); //通過變化切換元素顯示/隱藏
})
$('.di4').hide();
$('.but6').click(function(){
$('.di4').fadeIn(2000); //淡入效果
})
$('.but7').click(function(){
$('.di4').fadeOut(2000); //淡出效果
})
$('.but8').click(function(){
$('.di5').fadeToggle(2000); //切換淡入淡出效果
})
$('.but9').click(function(){
$('.di6').fadeTo(2000,0.3); //漸變改變元素的透明的到某值
})
$('.but10').click(function(){
$('.p1').animate({ //自定義動畫，操作單屬性
fontSize:'50px'
},2000)
$('.p1').animate({ //自定義動畫，可同時操作多屬性
opacity:'0.3',
left:'500px'
},2000)
})
$('.but11').click(function(){
$('.di7').animate({ //使用預(yù)設(shè)的屬性值
width:'toggle'
},2000)
})
$('.but12').click(function(){
$('.p1').stop(); //在動畫或效果完成前停止，使用默認(rèn)參數(shù)，即false
})
$('.but13').click(function(){
$('.p1').stop(true); //stopAll參數(shù)值設(shè)為true時
})
$('.but14').click(function(){
$('.p1').stop(false,true); //stopAll為false，goToEnd為true時
})
$('.but15').click(function(){
$('.p1').stop(true,true); //stopAll與goToEnd參數(shù)值都設(shè)為true時
})
})
</script>
<div class="di1"></div>
<br>
<button class="but1">隱藏</button>
<button class="but2">顯示</button>
<hr />
<button class="but3">向下顯示</button>
<button class="but4">向上隱藏</button>
<br><br>
<div class="di2"></div>
<br>
<button class="but5">切換</button>
<br><br>
<div class="di3"></div>
<hr>
<button class="but6">淡入</button>
<button class="but7">淡出</button>
<br><br>
<div class="di4"></div>
<br>
<button class="but8">切換</button>
<br><br>
<div class="di5"></div>
<br>
<button class="but9">改變透明度</button>
<br><br>
<div class="di6"></div>
<hr>
<button class="but10">自定義動畫</button>
<button class="but12">停止1</button>
<button class="but13">停止2</button>
<button class="but14">停止3</button>
<button class="but15">停止4</button>
<br>
<p class="p1">發(fā)VS立刻就分類就仿佛解放軍愛麗絲</p>
<br>
<button class="but11">預(yù)設(shè)值</button>
<br><br>
<div class="di7"></div>
</body>
</html>
Korrigierender Lehrer：滅絕師太Korrekturzeit：2019-03-11 09:03:08
Zusammenfassung des Lehrers：練習(xí)可以帶上實(shí)際效果的案例,練習(xí)一下實(shí)際運(yùn)用!