abstrakt：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
ul li{
width:50px;
background:brown;
color:#fff;
margin-bottom:10px;
list-style: none;
height:30px;
line-height:30px;
}
ul{
padding:0;
}
</style>
</head>
<body>
<div id="box" style="position:relative;width:200px;height:200px;background-color:blue;"></div>
<br>
<ul>
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
<li>導(dǎo)航5</li>
<li>導(dǎo)航6</li>
</ul>
<script>
$('ul li').hover(function(){
$(this).animate({
width:'500px'
},500);
},function(){
$(this).animate({
width:'50px'
},500);
})
</script>
</body>
</html>通過JQ獲取元素 然后添加事件執(zhí)行的操作 animate的第一個參數(shù)是動畫變更的內(nèi)容，第二個參數(shù)是動畫執(zhí)行時間，第三參數(shù)是動畫完畢后執(zhí)行的代碼。
stop()可以停止動畫執(zhí)行 stop第一個參數(shù)為布爾型 是否停止這個元素上當(dāng)前的所有隊列的動畫，第二個參數(shù)布爾型 是否立即完成當(dāng)前動畫。
Korrigierender Lehrer：查無此人Korrekturzeit：2019-05-07 09:38:15
Zusammenfassung des Lehrers：完成的不錯。動畫要配合絢麗的樣式。繼續(xù)加油。