摘要:jQuery 顯示/隱藏:<!DOCTYPE html><html><head> <title>jQuery 顯示/隱藏</title> <meta charset="utf-8"> <script src="ht
jQuery 顯示/隱藏:
<!DOCTYPE html>
<html>
<head>
<title>jQuery 顯示/隱藏</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
div{width: 200px;height: 200px;background:pink;margin:10px 0px;}
</style>
<script type="text/javascript">
// hide() 隱藏顯示的元素
// 書寫格式:hide([speed][sesing] [fn])
// show() 顯示隱藏的元素
// 書寫格式:show([speed][sesing] [fn])
// speed:顯示過(guò)程的速度 速度是毫秒值
// sesing:指定切換的效果
// fn:動(dòng)畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
$(document).ready(function() {
$('#bt1').click(function(){
$('p').hide(1500);
});
$('#bt2').click(function(){
$('p').show(1500);
});
});
</script>
</head>
<body>
<button id="bt1">點(diǎn)擊隱藏</button>
<button id="bt2">點(diǎn)擊顯示</button>
<!-- <div></div> -->
<p>借問(wèn)江潮與海水,何似君情與妾心?</p>
<p>水晶簾動(dòng)微風(fēng)起,滿架薔薇一院香。</p>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/1/
jQuery 滑動(dòng):
<!DOCTYPE html>
<html>
<head>
<title>jQuery 滑動(dòng)</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
// jQuery的滑動(dòng)是通過(guò)高度的變化(向某個(gè)方向增大或者縮小)來(lái)動(dòng)態(tài)的顯示所匹配的元素
// slideDown([speed])通過(guò)高度的變化,向下增大的動(dòng)態(tài)效果 下滑效果
// speed:下滑顯示過(guò)程的速度
// slideUp([speed]) 通過(guò)高度的變化,向上減小的動(dòng)態(tài)效果 上滑效果
// speed:上滑顯示過(guò)程的速度
// slideToggle([speed])通過(guò)高度的變化來(lái)切換元素的可見(jiàn)性
// speed:上滑隱藏/下滑顯示 過(guò)程的速度
$(document).ready(function(){
$('.p1').hide();
$('.but1').click(function(){
$('.p1').slideDown(100);
});
$('.but2').click(function(){
$('.p2').slideUp();
});
$('.but3').click(function(){
$('.p3').slideToggle(1000);
});
});
</script>
</head>
<body>
<button class="but1">下滑</button>
<p class="p1">玲瓏骰子安紅豆,入骨相思知不知。</p>
<p class="p1">玲瓏骰子安紅豆,入骨相思知不知。</p>
<p class="p1">玲瓏骰子安紅豆,入骨相思知不知。</p>
<br>
<button class="but2">上滑</button>
<p class="p2">人生若只如初見(jiàn),何事秋風(fēng)悲畫扇。</p>
<p class="p2">人生若只如初見(jiàn),何事秋風(fēng)悲畫扇。</p>
<p class="p2">人生若只如初見(jiàn),何事秋風(fēng)悲畫扇。</p>
<br>
<button class="but3">切換</button>
<p class="p3">曾經(jīng)滄海難為水,除卻巫山不是云。</p>
<p class="p3">曾經(jīng)滄海難為水,除卻巫山不是云。</p>
<p class="p3">曾經(jīng)滄海難為水,除卻巫山不是云。</p>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/1/
jQuery 淡入淡出:
<!DOCTYPE html>
<html>
<head>
<title>jQuery 淡入淡出</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
.mian{height:240px;width: 200px;margin-right: 20px;float: left;}
.box1,.box2,.box3,.box4{height: 200px;width: 200px;background: #feff57;}
button{height: 40px;width: 200px;border:none;}
</style>
<script type="text/javascript">
// jQuery是通過(guò)控制不透明度的變化來(lái)控制匹配到的元素的淡入淡出效果
// fadeIn([speed] [fn]) 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)匹配到元素的淡入的效果;
// fadeOut([speed] [fn])通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)匹配到元素的淡出的效果;
// fadeToggle([speed] [fn]) 通過(guò)不透明度的變化來(lái)開關(guān)所有匹配元素的淡入淡出效果;
// fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以漸進(jìn)發(fā)方式調(diào)整到指定的不透明度;
// // speed:規(guī)定效果的時(shí)長(zhǎng)
// fn:動(dòng)畫完成時(shí)執(zhí)行是函數(shù)
// opacity:fadeTo()方法中必須參數(shù),控制淡入淡出的效果的不透明度(值介于0與1之間)
$(document).ready(function(){
$('.box1').hide();
$('.btu1').click(function(){
$('.box1').fadeIn(3000);
});
$('.btu2').click(function(){
$('.box2').fadeOut();
});
$('.btu3').click(function(){
$('.box3').fadeToggle(1500);
});
$('.btu4').click(function(){
$('.box4').fadeTo(1000,0.3);
});
});
</script>
</head>
<body>
<div class="mian">
<button class="btu1">淡入</button>
<div class="box1"></div>
</div>
<div class="mian">
<button class="btu2">淡出</button>
<div class="box2"></div>
</div>
<div class="mian">
<button class="btu3">切換</button>
<div class="box3"></div>
</div>
<div class="mian">
<button class="btu4">淡出到指定值</button>
<div class="box4"></div>
</div>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/3
jQuery 自定義動(dòng)畫:
<!DOCTYPE html>
<html>
<head>
<title>jQuery 自定義動(dòng)畫</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
div{width: 400px;height: 200px;background: #05dfff;position: absolute; color: #fff;font-size: 20px}
</style>
<script type="text/javascript">
// jQuery中我們使用 animate()方法創(chuàng)建自定義的動(dòng)畫
// 語(yǔ)法:$(selector).animate({params},speed,fn);
// 必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
// 可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"、"fast" 或毫秒。
// 可選的 fn是動(dòng)畫完成后所執(zhí)行的函數(shù)
// 停止動(dòng)畫:
// stop() 方法用于停止動(dòng)畫或效果,在它們完成之前; 該方法適用于所有 jQuery 效果函數(shù),包括滑動(dòng)、淡入淡出和自定義動(dòng)畫
// 語(yǔ)法: $(selector).stop(stopAll,goToEnd)
// 可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是 false 僅停止活動(dòng)的動(dòng)畫,允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行
// 可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是 false
// 默認(rèn)情況下 stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫
$(document).ready(function(){
$('.but1').click(function(){
$('p').animate({fontSize:'40px'},1500);//屬性名稱font-size 一律改成駝峰寫法:fontSize
});
//同時(shí)操作多個(gè)css屬性
//使用預(yù)定義的值 show hide toggle
$('.but2').click(function(){
$('div').animate({
opacity:'0.3',
height:'400px',
width:'400px'
},1500)
});
$('#right').click(function(){
$('.box1').animate({left:'+500px'},3000);
$('.box1').animate({fontSize:'30px'},500);
});
$('#stop').click(function(){
$('.box1').stop(true);
});
});
</script>
</head>
<body>
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="box1"> 世間無(wú)限丹青手,一片傷心畫不成。</div>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/4
導(dǎo)航欄案例練習(xí):
<!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>
<style type="text/css">
*{margin: 0;padding: 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;
list-style: none;
}
a{
text-decoration:none;
color: #272525;
}
.c li{position: relative;}
.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>
<ul class="menu c">
<li><a href="">要聞</a></li>
<li><a href="">國(guó)際</a></li>
<li><a href="">國(guó)內(nèi)</a></li>
<li><a href="">社會(huì)</a></li>
<li><a href="">軍事</a></li>
<li><a href="">娛樂(lè)</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 () {
$('.c > li').hover(function () {
$(this).css('backgroundColor','#f5dc9c');
},
function () {
$(this).css('backgroundColor','#f5f5f5');
});
$('.c ul').hide();
$('.c > li').hover(function () {
$(this).find('ul').slideDown(300);
},
function () {
$(this).find('ul').slideUp(300);
});
});
</script>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/5
批改老師:韋小寶批改時(shí)間:2019-01-25 09:32:10
老師總結(jié):jQuery可以實(shí)現(xiàn)很多的動(dòng)畫特效 這些動(dòng)畫效果實(shí)現(xiàn)起來(lái)也是比較簡(jiǎn)單的 基本上都是大同小異 課后沒(méi)事可以多研究研究