收藏
批改状态：合格
老师批语：
今天主要学习了jq动画，包括隐藏hide 显示show 事件切换toggle 淡入fadeIn 淡出fadeOut 下滑slideDown 上滑slideUp 自定义动画animate，回调函数callback。
课堂演示了上述的动画效果，案例主要讲了移入移出顶部下拉返回效果，和三种水平的导航。代码如下：
一、各种动画演示
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jq动画</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.content {
margin: 20px;
font-size: 20px;
color: #fff;
float: left;
}
.content p {
width: 200px;
height: 160px;
line-height: 160px;
background-color: red;
text-align: center;
position: relative;
}
.content button {
width: 200px;
height: 40px;
border: none;
}
#box{width: 95px;height: 40px;border:none;}
</style>
</head>
<body>
<div class="content">
<button class="btu1">点我隐藏</button>
<p class="box1">~ 我是hide ~</p>
</div>
<div class="content">
<button class="btu2">点我显示</button>
<p class="box2">~ 我是show ~</p>
</div>
<div class="content">
<button class="btu3">事件切换</button>
<p class="box3">~ 我是toggle ~</p>
</div>
<div class="content">
<button class="btu4">淡入元素</button>
<p class="box4">~ 我是fadeIn ~</p>
</div>
<div class="content">
<button class="btu5">淡出元素</button>
<p class="box5">~ 我是fadeOut ~</p>
</div>
<div class="content">
<button class="btu6">淡出到指定值</button>
<p class="box6">~ 我是fadeOut ~</p>
</div>
<div class="content">
<button class="btu7">下滑效果</button>
<p class="box7">~ 我是slideDown~</p>
</div>
<div class="content">
<button class="btu8">上滑效果</button>
<p class="box8">~ 我是slideUp ~</p>
</div>
<div class="content">
<button class="btu9">动画效果</button>
<p class="box9">~ 我是animate ~</p>
</div>
<div class="content ">
<button class="btu10" id="box">动画效果</button> <button class="btu11" id="box">停止动画</button>
<p class="box10">~ 我是animate ~</p>
</div>
<div class="content">
<button class="btu12">callback</button>
<p class="box12">~ 我是callback ~</p>
</div>
<script>
$(function(){
// hide()隐藏
$('.btu1').click(function(){
$('.box1').hide();
});
// show()显示
$('.box2').hide();
$('.btu2').click(function(){
$('.box2').show();
});
// toggle()事件切换
$('.btu3').click(function(){
$('.box3').toggle();
});
// 淡入fadeIn()
$('.box4').hide();
$('.btu4').click(function(){
$('.box4').fadeIn(800);
});
// 淡出 fadeOut()
$('.btu5').click(function(){
$('.box5').fadeOut(800);
});
// fadeTo 淡化到指定值
$('.btu6').click(function(){
$('.box6').fadeTo(800, 0.3);
});
// slideDown 下滑
$('.box7').hide();
$('.btu7').click(function(){
$('.box7').slideDown();
});
// slideUp
$('.btu8').click(function(){
$('.box8').slideUp();
});
// animate动画
$('.btu9').click(function(){
$('.box9').animate({
height:'120px',
fontSize:'28px'
}, 800);
});
// stop()停止动画
$('.btu10').click(function(){
$('.box10').animate({
height:'120px',
fontSize:'28px'
}, 1000);
});
$('.btu11').click(function(){
$('.box10').stop();
});
// callback 在动画做完之后，再调用callback里面的函数
$('.btu12').click(function(){
$('.box12').animate({height:'300px'},1000,function(){
$(this).animate({height:'100px'}, 1000);
});
});
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例练习</title>
<link rel="icon" type="image/x-icon" href="2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<style type="text/css">
*{margin: 0;padding: 0;}
.box {
width: 100%;
height: 70px;
background-color: #f5f5f5;
line-height: 70px;
box-shadow: 1px 1px 10px #ccc;
border-radius: 4px;
position: relative;
top: -65px;
}
form {
width: 800px;
margin: 0 auto;
position: relative;
}
input {
width: 800px;
height: 35px;
padding-left: 15px;
border: none;
}
form i {
font-size: 28px;
position: absolute;
top: 0;
right: 10px;
}
span {
position: absolute;
width: 48px;
height: 48px;
background: url(show.jpg) -64px 168px;
right: 0;
}
.menu {
width:1000px;
height: 40px;
line-height: 40px;
margin: 20px auto;
background:#f5f5f5;
}
.menu a{
float: left;
text-align: center;
width: 10%;
font-weight: bold;
}
.three a{position: relative;}
.three a i{font-size: 12px;margin-left: 8px;}
.three ul{width: 100px;box-shadow: 0 2px 5px #f5f5f5;position: absolute;}
.three ul li{width: 100px;line-height: 40px;}
</style>
</head>
<body>
<div class="box">
<form>
<input type="text" placeholder="请输入关键词">
<i class="layui-icon"></i>
</form>
<span></span>
</div>
<div class="menu one">
<a href="">要闻</a>
<a href="">国际</a>
<a href="">国内</a>
<a href="">社会</a>
<a href="">军事</a>
<a href="">娱乐</a>
<a href="">体育</a>
<a href="">汽车</a>
<a href="">科技</a>
<a href="">其他</a>
</div>
<div class="menu two" style="position: relative;">
<a href="" name='0'>要闻</a>
<a href="" name='1'>国际</a>
<a href="" name='2'>国内</a>
<a href="" name='3'>社会</a>
<a href="" name='4'>军事</a>
<a href="" name='5'>娱乐</a>
<a href="" name='6'>体育</a>
<a href="" name='7'>汽车</a>
<a href="" name='8'>科技</a>
<a href="" name='9'>其他</a>
<div class="ba"style="position: absolute;width:100px;height: 3px;background:#ff6500;top: 37px; "></div>
</div>
<div class="menu three">
<a href="">要闻</a>
<a href="">国际</a>
<a href="">国内</a>
<a href="">社会</a>
<a href="">军事</a>
<a href="">娱乐</a>
<a href="">体育</a>
<a href="">汽车</a>
<a href="">科技</a>
<a href="">
其他<i class="layui-icon layui-icon-up"></i>
<ul>
<li>你说</li>
<li>你说</li>
<li>你说</li>
<li>你说</li>
</ul>
</a>
</div>
<!-- -->
<script>
$(function(){
// 鼠标移入移出 box的left改变
$('.box').hover(
function(){
$(this).stop().animate({top:'0px'}, 500);
},
function(){
$(this).stop().animate({top:'-65px'}, 500);
});
// 搜索框获取焦点边框变色 失去焦点恢复原貌
$('input').focus(function(){
$(this).css('box-shadow','0 0 5px orange inset');
});
$('input').blur(function(){
$(this).css('box-shadow','');
});
// 导航一
$('.one a').hover(
function(){
$(this).css({
"background-color":'#ff6500',
'color':'#fff'
});
},
function(){
$(this).css({
"background-color":'',
'color':''
});
}
);
// 导航二
$('.two a').hover(
function(){
var len = parseInt($(this).attr('name')) * $(this).width();
$('.ba').stop().animate({left:len + 'px'},300);
},
function(){
$('.ba').stop().animate({left:'0px'},400);
}
);
// 导航三
$('.three ul').hide();
$('.three a').hover(
function(){
$(this).find('i').attr('class', 'layui-icon layui-icon-down');
$(this).find('ul').slideDown(500);
},
function(){
$(this).find('i').attr('class', 'layui-icon layui-icon-up');
$(this).find('ul').slideUp(200);
}
);
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
1、动画都有参数（speed， callback）
2、自定义动画在应用时前面必须加stop()
3、案例较为简单没有特别的，布局还是有点慢
4、代码中对css attr 还有animate参数中的css{] 有点混淆，应该是 css单个css（“属性”,"值"）多个css（{“属性”："值" ....}） attr单个attr（'属性名'，'值'） 多个attr({“属性”："值" ....}) animate单个animate({属性:‘值’})多个在后面跟逗号
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
