????：總結：效果目前來看比較少，不知道是否夠用?；仡^自己去看下有沒有更多效果。最后的stop就沒有敲了，感覺用不上。案例是結合了導航的做法，把鼠標事件也寫了進去，不寫容易忘。本章兩個地方的作業(yè)寫在一起了，所以代碼是一樣的，老師看了前面的代碼就不用再看這個了。<!DOCTYPE html><html><head><meta charset="UTF-8&
總結：效果目前來看比較少，不知道是否夠用。回頭自己去看下有沒有更多效果。
最后的stop就沒有敲了，感覺用不上。案例是結合了導航的做法，把鼠標事件也寫了進去，不寫容易忘。本章兩個地方的作業(yè)寫在一起了，所以代碼是一樣的，老師看了前面的代碼就不用再看這個了。
<!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>
?? ???：天蓬老師?? ??：2018-11-06 07:43:35
???? ??：自定義動畫,除了可以使用常用的快捷方式之外,還可以使用提供的統(tǒng)一方法,要多多練習