摘要：笔记:15:隐藏/显示15-1:hide();隐藏显示的元素;内部有3个参数:非必填 1:speed:隐藏过程的速度,速度是毫秒值; 2:sesing:指定切换的效果 3:fn:动画完成时执行的一个函数15-2:show();显示隐藏的元素例:$('p').hide(1500)16:滑动16-1:通过高度的变化
笔记:
15:隐藏/显示
15-1:hide();隐藏显示的元素;内部有3个参数:非必填
1:speed:隐藏过程的速度,速度是毫秒值;
2:sesing:指定切换的效果
3:fn:动画完成时执行的一个函数
15-2:show();显示隐藏的元素
例:$('p').hide(1500)
16:滑动
16-1:通过高度的变化(想某个方向增大或者缩小)来动态的显示所匹配的元素
16-2:slideDown();下滑效果
16-3:slidUp();上滑效果
16-4:slideToggle();上滑隐藏/下滑显示
例:$('.p1').slideDown(1000)
17:淡入淡出
17-1:jQuery是通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果
17-2:fadeIn();通过不透明度的变化来实现匹配到元素的淡入效果
例:$('.box1').fadeIn(1000)
17-3:fadeOut();通过不透明度的变化来实现匹配到元素的淡出效果
例:$('.box2').fadeOut(1000)
17-4:fadeToggle();通过不透明度的变化来开关所有匹配元素的淡入淡出效果
例:$('.box3').fadeToggle(1000)
17-5:fadeTo();把所有匹配到元素的不透明度以渐进方式调整到指定的不透明度,取值范围0-1之间
例:$('.box4').fadeTo(1000,0.3)
18:自定义动画
18-1:animate();创建自定义动画
例:$('p').animate({fontSize:'40px'},1000)
多值例:$('div').animate({
left:'400px',
opacity:'0.3',
width:'toggle'
},1000)
18-2:stop停止动画
1:stopAll:规定是否应该清除动画列队,仅停止当前动画,允许任何排入队列的动画向后执行
2:11:05 2019/3/11:规定是否立即完成当前动画
例:$('div').stop(true)
18-3:css设置内 poisition:absolute;
导航代码:
<!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>我的作业</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">蓝</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>
批改老师：灭绝师太批改时间：2019-03-11 11:32:55
老师总结：看视频的速度很快哦,完成的不错,继续保持!
