99精品国产一区二区三区,欧美午夜特黄aaaaaa片

????：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:顯示過程的速度速度是毫秒值
// sesing:指定切換的效果
// fn:動畫完成時執(zhí)行的一個函數(shù)
$(document).ready(function() {
$('#bt1').click(function(){
$('p').hide(1500);
});
$('#bt2').click(function(){
$('p').show(1500);
});
});

</script>
</head>
<body>
<button id="bt1">點擊隱藏</button>
<button id="bt2">點擊顯示</button>

<p>借問江潮與海水，何似君情與妾心？</p>
<p>水晶簾動微風(fē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>
<script>
// jQuery的滑動是通過高度的變化（向某個方向增大或者縮小）來動態(tài)的顯示所匹配的元素

// slideDown([speed])通過高度的變化，向下增大的動態(tài)效果下滑效果
// speed:下滑顯示過程的速度

// slideUp([speed]) 通過高度的變化，向上減小的動態(tài)效果上滑效果
// speed:上滑顯示過程的速度

// slideToggle([speed])通過高度的變化來切換元素的可見性
// speed:上滑隱藏/下滑顯示過程的速度
$(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">人生若只如初見，何事秋風(fēng)悲畫扇。</p>
<p class="p2">人生若只如初見，何事秋風(fēng)悲畫扇。</p>
<p class="p2">人生若只如初見，何事秋風(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是通過控制不透明度的變化來控制匹配到的元素的淡入淡出效果

// fadeIn([speed] [fn]) 通過不透明度的變化來實現(xiàn)匹配到元素的淡入的效果;
// fadeOut([speed] [fn])通過不透明度的變化來實現(xiàn)匹配到元素的淡出的效果;
// fadeToggle([speed] [fn]) 通過不透明度的變化來開關(guān)所有匹配元素的淡入淡出效果;
// fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以漸進(jìn)發(fā)方式調(diào)整到指定的不透明度;
// // speed:規(guī)定效果的時長
// fn:動畫完成時執(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 自定義動畫：

<!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: 400px;height: 200px;background: #05dfff;position: absolute; color: #fff;font-size: 20px}
</style>
<script type="text/javascript">
// jQuery中我們使用 animate()方法創(chuàng)建自定義的動畫

// 語法:$(selector).animate({params},speed,fn);

// 必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
// 可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
// 可選的 fn是動畫完成后所執(zhí)行的函數(shù)
// 停止動畫：
// stop() 方法用于停止動畫或效果，在它們完成之前；該方法適用于所有 jQuery 效果函數(shù)，包括滑動、淡入淡出和自定義動畫
// 語法: $(selector).stop(stopAll,goToEnd)
// 可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動畫隊列。默認(rèn)是 false 僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行
// 可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false
// 默認(rèn)情況下 stop() 會清除在被選元素上指定的當(dāng)前動畫
$(document).ready(function(){
$('.but1').click(function(){
$('p').animate({fontSize:'40px'},1500);//屬性名稱font-size 一律改成駝峰寫法：fontSize
});
//同時操作多個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"> 世間無限丹青手，一片傷心畫不成。</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="">國際</a></li>
<li><a href="">國內(nèi)</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 () {
$('.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

?? ???：韋小寶?? ??：2019-01-25 09:32:10
???? ??：jQuery可以實現(xiàn)很多的動畫特效這些動畫效果實現(xiàn)起來也是比較簡單的基本上都是大同小異課后沒事可以多研究研究

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Query動畫效果

?? ??