摘要：筆記:15:隱藏/顯示15-1:hide();隱藏顯示的元素;內(nèi)部有3個(gè)參數(shù):非必填 1:speed:隱藏過(guò)程的速度,速度是毫秒值; 2:sesing:指定切換的效果 3:fn:動(dòng)畫完成時(shí)執(zhí)行的一個(gè)函數(shù)15-2:show();顯示隱藏的元素例:$('p').hide(1500)16:滑動(dòng)16-1:通過(guò)高度的變化
筆記:
15:隱藏/顯示
15-1:hide();隱藏顯示的元素;內(nèi)部有3個(gè)參數(shù):非必填
1:speed:隱藏過(guò)程的速度,速度是毫秒值;
2:sesing:指定切換的效果
3:fn:動(dòng)畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
15-2:show();顯示隱藏的元素
例:$('p').hide(1500)
16:滑動(dòng)
16-1:通過(guò)高度的變化(想某個(gè)方向增大或者縮小)來(lái)動(dòng)態(tài)的顯示所匹配的元素
16-2:slideDown();下滑效果
16-3:slidUp();上滑效果
16-4:slideToggle();上滑隱藏/下滑顯示
例:$('.p1').slideDown(1000)
17:淡入淡出
17-1:jQuery是通過(guò)控制不透明度的變化來(lái)控制匹配到的元素的淡入淡出效果
17-2:fadeIn();通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)匹配到元素的淡入效果
例:$('.box1').fadeIn(1000)
17-3:fadeOut();通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)匹配到元素的淡出效果
例:$('.box2').fadeOut(1000)
17-4:fadeToggle();通過(guò)不透明度的變化來(lái)開關(guān)所有匹配元素的淡入淡出效果
例:$('.box3').fadeToggle(1000)
17-5:fadeTo();把所有匹配到元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度,取值范圍0-1之間
例:$('.box4').fadeTo(1000,0.3)
18:自定義動(dòng)畫
18-1:animate();創(chuàng)建自定義動(dòng)畫
例:$('p').animate({fontSize:'40px'},1000)
多值例:$('div').animate({
left:'400px',
opacity:'0.3',
width:'toggle'
},1000)
18-2:stop停止動(dòng)畫
1:stopAll:規(guī)定是否應(yīng)該清除動(dòng)畫列隊(duì),僅停止當(dāng)前動(dòng)畫,允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行
2:11:05 2019/3/11:規(guī)定是否立即完成當(dāng)前動(dòng)畫
例:$('div').stop(true)
18-3:css設(shè)置內(nèi) poisition:absolute;
導(dǎo)航代碼:
<!DOCTYPE html>
<html>
<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">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.clear{clear:both}
#ddiv1{width: 100px;height: 550px;float: left;}
.Navigation{background: #7DD43B;width: 100px;height: 80px;margin:10px 0px;text-align: center;line-height: 80px;}
.Show{width: 150px;height: 540px;float: right;margin: 14px; position:absolute; left:1200px; top:-5px;}
</style>
<title>我的作業(yè)</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#Show1').hover(
function(){
$('.Show').css('background','red')
$('#div1').animate({left:'100px',opactiy:'0.3'},1000)
$('#div2').animate({left:'260px',opactiy:'0.3'},1000)
$('#div3').animate({left:'420px',opactiy:'0.3'},1000)
$('#div4').animate({left:'580px',opactiy:'0.3'},1000)
$('#div5').animate({left:'740px',opactiy:'0.3'},1000)
$('#div6').animate({left:'900px',opactiy:'0.3'},1000)
$('#div7').animate({left:'1060px',opactiy:'0.3'},1000)
},
function(){
$('#div1').animate({left:'1200px',opactiy:'1'},0)
$('#div2').animate({left:'1200px',opactiy:'1'},0)
$('#div3').animate({left:'1200px',opactiy:'1'},0)
$('#div4').animate({left:'1200px',opactiy:'1'},0)
$('#div5').animate({left:'1200px',opactiy:'1'},0)
$('#div6').animate({left:'1200px',opactiy:'1'},0)
$('#div7').animate({left:'1200px',opactiy:'1'},0)
$('.Show').css('background','#fff')
})
$('#Show2').hover(
function(){
$('.Show').css('background','blue')
$('#div1').animate({left:'100px',opactiy:'0.3'},1000)
$('#div2').animate({left:'260px',opactiy:'0.3'},1000)
$('#div3').animate({left:'420px',opactiy:'0.3'},1000)
$('#div4').animate({left:'580px',opactiy:'0.3'},1000)
$('#div5').animate({left:'740px',opactiy:'0.3'},1000)
$('#div6').animate({left:'900px',opactiy:'0.3'},1000)
$('#div7').animate({left:'1060px',opactiy:'0.3'},1000)
},
function(){
$('#div1').animate({left:'1200px',opactiy:'1'},0)
$('#div2').animate({left:'1200px',opactiy:'1'},0)
$('#div3').animate({left:'1200px',opactiy:'1'},0)
$('#div4').animate({left:'1200px',opactiy:'1'},0)
$('#div5').animate({left:'1200px',opactiy:'1'},0)
$('#div6').animate({left:'1200px',opactiy:'1'},0)
$('#div7').animate({left:'1200px',opactiy:'1'},0)
$('.Show').css('background','#fff')
})
$('#Show3').hover(
function(){
$('.Show').css('background','green')
$('#div1').animate({left:'100px',opactiy:'0.3'},1000)
$('#div2').animate({left:'260px',opactiy:'0.3'},1000)
$('#div3').animate({left:'420px',opactiy:'0.3'},1000)
$('#div4').animate({left:'580px',opactiy:'0.3'},1000)
$('#div5').animate({left:'740px',opactiy:'0.3'},1000)
$('#div6').animate({left:'900px',opactiy:'0.3'},1000)
$('#div7').animate({left:'1060px',opactiy:'0.3'},1000)
},
function(){
$('#div1').animate({left:'1200px',opactiy:'1'},0)
$('#div2').animate({left:'1200px',opactiy:'1'},0)
$('#div3').animate({left:'1200px',opactiy:'1'},0)
$('#div4').animate({left:'1200px',opactiy:'1'},0)
$('#div5').animate({left:'1200px',opactiy:'1'},0)
$('#div6').animate({left:'1200px',opactiy:'1'},0)
$('#div7').animate({left:'1200px',opactiy:'1'},0)
$('.Show').css('background','#fff')
})
$('#Show4').hover(
function(){
$('.Show').css('background','pink')
$('#div1').animate({left:'100px',opactiy:'0.3'},1000)
$('#div2').animate({left:'260px',opactiy:'0.3'},1000)
$('#div3').animate({left:'420px',opactiy:'0.3'},1000)
$('#div4').animate({left:'580px',opactiy:'0.3'},1000)
$('#div5').animate({left:'740px',opactiy:'0.3'},1000)
$('#div6').animate({left:'900px',opactiy:'0.3'},1000)
$('#div7').animate({left:'1060px',opactiy:'0.3'},1000)
},
function(){
$('#div1').animate({left:'1200px',opactiy:'1'},0)
$('#div2').animate({left:'1200px',opactiy:'1'},0)
$('#div3').animate({left:'1200px',opactiy:'1'},0)
$('#div4').animate({left:'1200px',opactiy:'1'},0)
$('#div5').animate({left:'1200px',opactiy:'1'},0)
$('#div6').animate({left:'1200px',opactiy:'1'},0)
$('#div7').animate({left:'1200px',opactiy:'1'},0)
$('.Show').css('background','#fff')
})
$('#Show5').hover(
function(){
$('.Show').css('background','black')
$('#div1').animate({left:'100px',opactiy:'0.3'},1000)
$('#div2').animate({left:'260px',opactiy:'0.3'},1000)
$('#div3').animate({left:'420px',opactiy:'0.3'},1000)
$('#div4').animate({left:'580px',opactiy:'0.3'},1000)
$('#div5').animate({left:'740px',opactiy:'0.3'},1000)
$('#div6').animate({left:'900px',opactiy:'0.3'},1000)
$('#div7').animate({left:'1060px',opactiy:'0.3'},1000)
},
function(){
$('#div1').animate({left:'1200px',opactiy:'1'},0)
$('#div2').animate({left:'1200px',opactiy:'1'},0)
$('#div3').animate({left:'1200px',opactiy:'1'},0)
$('#div4').animate({left:'1200px',opactiy:'1'},0)
$('#div5').animate({left:'1200px',opactiy:'1'},0)
$('#div6').animate({left:'1200px',opactiy:'1'},0)
$('#div7').animate({left:'1200px',opactiy:'1'},0)
$('.Show').css('background','#fff')
})
$('#Show6').hover(
function(){
$('.Show').css('background','yellow')
$('#div1').animate({left:'100px',opactiy:'0.3'},1000)
$('#div2').animate({left:'260px',opactiy:'0.3'},1000)
$('#div3').animate({left:'420px',opactiy:'0.3'},1000)
$('#div4').animate({left:'580px',opactiy:'0.3'},1000)
$('#div5').animate({left:'740px',opactiy:'0.3'},1000)
$('#div6').animate({left:'900px',opactiy:'0.3'},1000)
$('#div7').animate({left:'1060px',opactiy:'0.3'},1000)
},
function(){
$('#div1').animate({left:'1200px',opactiy:'1'},0)
$('#div2').animate({left:'1200px',opactiy:'1'},0)
$('#div3').animate({left:'1200px',opactiy:'1'},0)
$('#div4').animate({left:'1200px',opactiy:'1'},0)
$('#div5').animate({left:'1200px',opactiy:'1'},0)
$('#div6').animate({left:'1200px',opactiy:'1'},0)
$('#div7').animate({left:'1200px',opactiy:'1'},0)
$('.Show').css('background','#fff')
})
})
</script>
<div class=""id="ddiv1">
<divid="Show1">紅</div>
<divid="Show2">藍(lán)</div>
<divid="Show3">綠</div>
<divid="Show4">粉</div>
<divid="Show5">黑</div>
<divid="Show6">黃</div>
</div>
<divid="div1"></div>
<divid="div2"></div>
<divid="div3"></div>
<divid="div4"></div>
<divid="div5"></div>
<divid="div6"></div>
<divid="div7"></div>
<div></div>
</body>
</html>
批改老師：滅絕師太批改時(shí)間：2019-03-11 11:32:55
老師總結(jié)：看視頻的速度很快哦,完成的不錯(cuò),繼續(xù)保持!