摘要：總結(jié)：動畫效果比較少，但是了解一下animate的使用。我把本章整個涉及到的知識點都敲了一下。老師請查看。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq動畫</title><script type="text/javasc
總結(jié)：動畫效果比較少，但是了解一下animate的使用。我把本章整個涉及到的知識點都敲了一下。老師請查看。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq動畫</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0 auto;}
ul{
margin: 20px 0px 0px 300px;
}
ul li{
display: inline-block;
height:28px;
border:1px solid pink;
line-height: 28px;
padding-left:0px;
color:pink;
}
li:hover{
background-color:pink;
color:#fff;
}
#down_div{
height: 28px;
width:100%;
background-color:pink;
margin:0px auto;
}
span{
color:#666;
margin:0px auto;
}
#b_box{
height: 200px;
width: 200px;
background-color:#888;
color:#fff;
position: absolute;
top:-200px;
left:500px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//顯示隱藏
$('#down_div').hide()
$('#li1').mouseover(function(){
$('#down_div').show(500)
})
$('#li1').mouseout(function(){
$('#down_div').hide(500)
})
//淡入淡出
$('#li2').mouseover(function(){
$('#down_div').fadeIn(500)
})
$('#li2').mouseout(function(){
$('#down_div').fadeOut(500)
})
//滑動
$('#li3').mouseover(function(){
$('#down_div').slideDown(500)
})
$('#li3').mouseout(function(){
$('#down_div').slideUp(500)
})
//動畫、移動
$('#li4').mouseover(function(){
$('#b_box').animate({top:'300px'},1500)
})
$('#li4').mouseout(function(){
$('#b_box').animate({top:'-300px'},1500)
})
})
</script>
<ul id="ul_out">
<li id="li1">顯示隱藏</li>
<li id="li2">淡入淡出</li>
<li id="li3">滑上滑下</li>
<li id="li4">掉下個寶盒</li>
<li id="li5">導航五</li>
</ul>
<div id="down_div"><span>看到我就說明你成功啦</span></div>
<div id="b_box"><span>寶盒</span></div>
</body>
</html>