收藏
批改狀態(tài)：合格
老師批語：
今天主要學(xué)習(xí)了jq動(dòng)畫，包括隱藏hide 顯示show 事件切換toggle 淡入fadeIn 淡出fadeOut 下滑slideDown 上滑slideUp 自定義動(dòng)畫animate，回調(diào)函數(shù)callback。
課堂演示了上述的動(dòng)畫效果，案例主要講了移入移出頂部下拉返回效果，和三種水平的導(dǎo)航。代碼如下：
一、各種動(dòng)畫演示
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jq動(dòng)畫</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">點(diǎn)我隱藏</button>
<p class="box1">~ 我是hide ~</p>
</div>
<div class="content">
<button class="btu2">點(diǎn)我顯示</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">動(dòng)畫效果</button>
<p class="box9">~ 我是animate ~</p>
</div>
<div class="content ">
<button class="btu10" id="box">動(dòng)畫效果</button> <button class="btu11" id="box">停止動(dòng)畫</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動(dòng)畫
$('.btu9').click(function(){
$('.box9').animate({
height:'120px',
fontSize:'28px'
}, 800);
});
// stop()停止動(dòng)畫
$('.btu10').click(function(){
$('.box10').animate({
height:'120px',
fontSize:'28px'
}, 1000);
});
$('.btu11').click(function(){
$('.box10').stop();
});
// callback 在動(dòng)畫做完之后，再調(diào)用callback里面的函數(shù)
$('.btu12').click(function(){
$('.box12').animate({height:'300px'},1000,function(){
$(this).animate({height:'100px'}, 1000);
});
});
});
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
二、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例練習(xí)</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="請(qǐng)輸入關(guān)鍵詞">
<i class="layui-icon"></i>
</form>
<span></span>
</div>
<div class="menu one">
<a href="">要聞</a>
<a href="">國(guó)際</a>
<a href="">國(guó)內(nèi)</a>
<a href="">社會(huì)</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'>國(guó)際</a>
<a href="" name='2'>國(guó)內(nèi)</a>
<a href="" name='3'>社會(huì)</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="">國(guó)際</a>
<a href="">國(guó)內(nèi)</a>
<a href="">社會(huì)</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(){
// 鼠標(biāo)移入移出 box的left改變
$('.box').hover(
function(){
$(this).stop().animate({top:'0px'}, 500);
},
function(){
$(this).stop().animate({top:'-65px'}, 500);
});
// 搜索框獲取焦點(diǎn)邊框變色 失去焦點(diǎn)恢復(fù)原貌
$('input').focus(function(){
$(this).css('box-shadow','0 0 5px orange inset');
});
$('input').blur(function(){
$(this).css('box-shadow','');
});
// 導(dǎo)航一
$('.one a').hover(
function(){
$(this).css({
"background-color":'#ff6500',
'color':'#fff'
});
},
function(){
$(this).css({
"background-color":'',
'color':''
});
}
);
// 導(dǎo)航二
$('.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);
}
);
// 導(dǎo)航三
$('.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>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
總結(jié)：
1、動(dòng)畫都有參數(shù)（speed， callback）
2、自定義動(dòng)畫在應(yīng)用時(shí)前面必須加stop()
3、案例較為簡(jiǎn)單沒有特別的，布局還是有點(diǎn)慢
4、代碼中對(duì)css attr 還有animate參數(shù)中的css{] 有點(diǎn)混淆，應(yīng)該是 css單個(gè)css（“屬性”,"值"）多個(gè)css（{“屬性”："值" ....}） attr單個(gè)attr（'屬性名'，'值'） 多個(gè)attr({“屬性”："值" ....}) animate單個(gè)animate({屬性:‘值’})多個(gè)在后面跟逗號(hào)
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)