abstrakt：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!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>自定義導航欄</title>
<script src="../../demo/js/jq_3.3.1_mi.js"></script>
<style>
ul{
list-style-type: none;
position: relative;
}
ul li{
float: left;
padding: 8px 16px;
border: 1px solid #ff6500;
}
li a{
color: #000;
text-decoration: none;
}
#a2{
position: absolute;
left: 0;
top: 39px;
}
#a2 li{
width: 113px;
display: none;
}
</style>
</head>
<body>
<script>
// $(document).ready(function(){
// // $('div').css('background','red')
// $('li').hover(function(){
// $('a1').css('display','block')
// },function(){
// $('ai').css('display','none')
// })
// })
$(document).ready(function(){
$("#a1").hover(function(){
$('#a3').css("display","block")
},function(){
$('#a3').css("display","none")
})
})
</script>
<ul>
<li id="a1"><a href="#home">鼠標按順序移動</a>
<ul id="a2">
<li id="a3"><a href="">測試</a></li>
</ul>
</li>
<li><a href="#news">1</a></li>
<li><a href="#contact">2</a></li>
<li><a href="#about">3</a></li>
<li><a href="#about">點擊</a></li>
</ul>
<!-- <div style="width:100px;height:100px;border:1px solid red;" id="a1">點擊</div>
<div style="width:100px;height:100px;border:1px solid red;display: none" id="a2">隱藏</div> -->
</body>
</html>
總結：
1、發(fā)現(xiàn)animate不能做控制元素的背景顏色
2、用hover方法做的隱藏顯示效果
不知道算不算是動畫，用導航欄做的效果一時間想起來的是改變背景顏色還有隱藏顯示二級菜單
Korrigierender Lehrer：西門大官人Korrekturzeit：2019-02-17 09:05:56
Zusammenfassung des Lehrers：嚴格意義上來說，這不是動畫，僅僅是用jquery控制了元素的css樣式。