收藏
批改状态：合格
老师批语：
常用的jQuery的动画举例：
hide(speed,callback) 隐藏显示的属性
show(speed,callback) 显示隐藏的属性
toggle(speed,callback) 事件切换 显示和隐藏切换
fadeIn(speed,callback) 用于淡入已经隐藏元素
fadeOut(speed,callback) 用于淡出可见元素
fadeTo(speed,opacity,callback) 把所有匹配的元素 以渐变的方式调整透明度
slideDown(speed,callback)通过高度的变化，向下增大的动态效果 下滑效果;
slideUp(speed,callback)通过高度的变化，向上减小的动态效果 上滑效果;
animate(speed,callback) 方法用于创建自定义动画;
语法: $(selector).animate({params},speed,callback);
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<link rel="icon" type="image/x-icon" href="images/2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{margin:0;padding: 0; }
.content{margin:20px;font-size:20px;color: #fff;float: left; }
.content p{height: 160px;width: 200px;background: red;text-align: center;line-height: 160px;position: relative;}
.content button{height: 40px;width: 200px;border:none;}
#box{width: 95px;height: 40px;border:none;}
#text{text-shadow: 3px 3px 3px #ff6500;color: #fff;font-size: 25px;}
</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">~ 我是fadeTo ~</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(){
//jQuery 显示和隐藏
//hide(speed,callback) 隐藏显示的属性
$('.btu1').click(function () {
$('.box1').hide();
});
$('.box2').hide();
//show(speed,callback) 显示隐藏的属性
$('.btu2').click(function () {
$('.box2').show();
});
//toggle(speed,callback) 事件切换 显示和隐藏切换
$('.btu3').click(function () {
$('.box3').toggle();
});
//淡入淡出效果
// fadeIn(speed,callback) 用于淡入已经隐藏元素
$('.box4').hide();
$('.btu4').click(function () {
$('.box4').fadeIn(2000);
});
// fadeOut(speed,callback) 用于淡出可见元素
$('.btu5').click(function () {
$('.box5').fadeOut(2000);
});
// fadeTo(speed,opacity,callback) 把所有匹配的元素 以渐变的方式调整透明度
//opacity：fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
$('.btu6').click(function () {
$('.box6').fadeTo(2000,0.3);
});
//滑动效果
//slideDown(speed,callback)通过高度的变化，向下增大的动态效果 下滑效果;
$('.box7').hide();
$('.btu7').click(function () {
$('.box7').slideDown();
});
//slideUp(speed,callback)通过高度的变化，向上减小的动态效果 上滑效果;
$('.btu8').click(function () {
$('.box8').slideUp();
});
// 动画效果
// animate(speed,callback) 方法用于创建自定义动画;
// 语法: $(selector).animate({params},speed,callback);
$('.btu9').click(function () {
$('.box9').animate({fontSize:'14px'},1500);
});
$('.btu10').click(function () {
$('.box10').animate({
opacity:'0.3',
width:'400px',
height:'300px',
borderRadius:'40px',
lineHeight:'300px'
},1500);
});
//停止动画：
//stop() 方法用于停止动画或效果
$('.btu11').click(function () {
$('.box10').stop();
});
//callback 回调函数
$('.btu12').click(function () {
$(this).hide(100,function () {
$('body').css('background','#dbffc2');
});
});
})
</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;
box-shadow: 1px 1px 10px #ccc;
line-height: 70px;
position: relative;
top: -60px;
}
form{
width: 800px;
margin: 0 auto;
position: relative;
}
input{
width: 800px;height: 35px;
border: 0;
border-radius: 4px;
padding-left: 15px;
}
form i{
font-size: 20px;
position: absolute;
top: 0;
right: 10px;
}
span{
position: absolute;
width: 48px;
height: 48px;
display: block;
background: url(show.jpg) -64px 168px;
right: 0;
}
.menu{
width: 1000px;height: 40px;
line-height: 40px;
margin: 20px auto;
background-color: #f5f5f5;
}
.menu li{
float: left;
text-align: center;
width: 10%;
font-weight: bold;
}
.a li:hover a{color: white;}
.c li{position: relative;}
.c li i{font-size: 12px;margin-left: 8px}
.c li ul{width: 100px;box-shadow: 0 2px 5px #f5f5f5;position: absolute;}
.c li ul li{
width: 100px;
line-height: 40px;
}
.c li ul li:hover{
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="box">
<form action="">
<input type="text" placeholder=" 请输入关键字~ "><i class="layui-icon"></i>
</form>
<span></span>
</div>
<ul class="menu a">
<li><a href="">要闻</a></li>
<li><a href="">国际</a></li>
<li><a href="">国内</a></li>
<li><a href="">社会</a></li>
<li><a href="">军事</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">体育</a></li>
<li><a href="">汽车</a></li>
<li><a href="">科技</a></li>
<li><a href="">其他</a></li>
</ul>
<ul class="menu b" style="position: relative">
<li name="0"><a href="">要闻</a></li>
<li name="1"><a href="">国际</a></li>
<li name="2"><a href="">国内</a></li>
<li name="3"><a href="">社会</a></li>
<li name="4"><a href="">军事</a></li>
<li name="5"><a href="">娱乐</a></li>
<li name="6"><a href="">体育</a></li>
<li name="7"><a href="">汽车</a></li>
<li name="8"><a href="">科技</a></li>
<li name="9"><a href="">其他</a></li>
<div class="ba"style="position: absolute;width:100px;height: 3px;background:#ff6500;top: 37px; "></div>
</ul>
<ul class="menu c">
<li><a href="">要闻</a></li>
<li><a href="">国际</a></li>
<li><a href="">国内</a></li>
<li><a href="">社会</a></li>
<li><a href="">军事</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">体育</a></li>
<li><a href="">汽车</a></li>
<li><a href="">科技</a></li>
<li><a href="">其他 <i class="layui-icon layui-icon-up"></i></a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</li>
</ul>
<script>
$(function () {
$('input').focus(function () {
// inset 内阴影
$(this).css('boxShadow','0 0 5px #ff6500 inset');
});
//blur 离开焦点
$('input').blur(function () {
$(this).css('boxShadow','');
});
$('.box').hover(function () {
$(this).stop().animate({'top':'2px'},500);
},
function () {
$(this).stop().animate({'top':'-65px'},500);
});
});
//第一个导航
$('.a > li').hover(function () {
$(this).css('backgroundColor','#ff6500');
},
function () {
$(this).css('backgroundColor','#f5f5f5');
});
//第二个导航
$('.b>li').hover(function(){
$x=parseInt($(this).attr('name'))*100;
$('.ba').stop().animate({left:$x+'px'},300);
},
function(){
$('.ba').stop().animate({left:0},300);
});
//第三个导航
$('.c ul').hide();
$('.c > li').hover(function () {
$(this).find('i').attr('class','layui-icon layui-icon-down');
$(this).find('ul').slideDown(300);
},
function () {
$(this).find('i').attr('class','layui-icon layui-icon-up');
$(this).find('ul').slideUp(300);
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
