1. jQuery影片效果
jQuery提供的一組網頁中常見的影片效果，這些影片是標準的、有規律的效果；同時還提供給我們了自定義影片的功能，
1.1 顯示影片
方式一：
$("div").show();
無引數，表示讓指定的元素直接顯示出來，其實這個方法的底層就是通過display: block;實作的，
方式二：
$('div').show(3000);
通過控制元素的寬高、透明度、display屬性，逐漸顯示，2秒后顯示完畢，
方式三：
$("div").show("slow");
引數可以是：
slow 慢：600ms
normal 正常：400ms
fast 快：200ms
和方式二類似，也是通過控制元素的寬高、透明度、display屬性，逐漸顯示，
方式四：
//show(毫秒值，回呼函式; $("div").show(5000,function () { alert("影片執行完畢！"); });
影片執行完后，立即執行回呼函式，
總結：
上面的四種方式幾乎一致：引數可以有兩個，第一個是影片的執行時長，第二個是影片結束后執行的回呼函式，
1.2 隱藏影片
方式參照上面的show()方法的方式，如下：
$(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){});
1.3 顯示隱藏案例
1.3.1 實作點擊按鈕顯示盒子，再點擊按鈕隱藏盒子
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: green;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隱藏</button>
</body>
<script src="https://www.cnblogs.com/liuhui0308/p/jquery-2.1.0.js"></script>
<script type="text/javascript">
//jquery 提供了一些方法 show() hide() 控制元素顯示隱藏
var isShow = true;
$('#btn').click(function(){
if(isShow){
$('#box').show('slow',function(){
$(this).text('盒子出來了');
$('#btn').text('顯示');
isShow = false;
})
}else{
$('#box').hide(2000,function(){
$(this).text('');
$('#btn').text('隱藏');
isShow = true;
})
}
})
</script>
</html>
1.3.2 開關式顯示隱藏影片
$('#box').toggle(3000,function(){});
顯示和隱藏的來回切換采用的是toggle()方法：就是先執行show()，再執行hide()，
代碼如下：
$('#btn').click(function(){
$('#box').toggle(3000,function(){
$(this).text('盒子出來了');
if ($('#btn').text()=='隱藏') {
$('#btn').text('顯示');
}else{
$('#btn').text('隱藏');
}
});
})
1.4 滑入和滑出
1.滑入影片效果：（類似于生活中的卷簾門）
$(selector).slideDown(speed, 回呼函式);
下拉影片，顯示元素，
注意：省略引數或者傳入不合法的字串，那么則使用默認值：400毫秒（同樣適用于fadeIn/slideDown/slideUp）
2.滑出影片效果：
$(selector).slideUp(speed, 回呼函式);
上拉影片，隱藏元素，
3.滑入滑出切換影片效果：
$(selector).slideToggle(speed, 回呼函式);
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
background-color: green;
}
</style>
<script src="https://www.cnblogs.com/liuhui0308/p/jquery-2.1.0.js"></script>
<script>
$(function () {
//點擊按鈕后產生影片
$("button:eq(0)").click(function () {
//滑入影片： slideDown(毫秒值，回呼函式[顯示完畢執行什么]);
$("div").slideDown(2000, function () {
alert("影片執行完畢！");
});
})
//滑出影片
$("button:eq(1)").click(function () {
//滑出影片：slideUp(毫秒值，回呼函式[顯示完畢后執行什么]);
$("div").slideUp(2000, function () {
alert("影片執行完畢！");
});
})
$("button:eq(2)").click(function () {
//滑入滑出切換（同樣有四種用法）
$("div").slideToggle(1000);
})
})
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>
</body>
</html>
1.5 淡入淡出影片
1.淡入影片效果：
$(selector).fadeIn(speed, callback);
讓元素以淡淡的進入視線的方式展示出來，
2.淡出影片效果：
$(selector).fadeOut(1000);
讓元素以漸漸消失的方式隱藏起來，
3.淡入淡出切換影片效果：
$(selector).fadeToggle('fast', callback);
通過改變透明度，切換匹配元素的顯示或隱藏狀態，
引數的含義同show()方法，
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
/*透明度*/
opacity: 0.5;
background-color: red;
}
</style>
<script src="https://www.cnblogs.com/liuhui0308/p/jquery-2.1.0.js"></script>
<script>
$(function () {
//點擊按鈕后產生影片
$("button:eq(0)").click(function () {
// //淡入影片用法1: fadeIn(); 不加引數
$("div").fadeIn();
// //淡入影片用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通過控制 透明度和display
//淡入影片用法3: fadeIn(字串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal");
//淡入影片用法4: fadeIn(毫秒值，回呼函式[顯示完畢執行什么]);
// $("div").fadeIn(5000,function () {
// alert("影片執行完畢！");
// });
})
//滑出影片
$("button:eq(1)").click(function () {
// //滑出影片用法1: fadeOut(); 不加引數
$("div").fadeOut();
// //滑出影片用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通過這個方法實作的：display: none;
// //通過控制 透明度和display
//滑出影片用法3: fadeOut(字串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal");
//滑出影片用法1: fadeOut(毫秒值，回呼函式[顯示完畢執行什么]);
// $("div").fadeOut(2000,function () {
// alert("影片執行完畢！");
// });
})
$("button:eq(2)").click(function () {
//滑入滑出切換
//同樣有四種用法
$("div").fadeToggle(1000);
})
$("button:eq(3)").click(function () {
//改透明度
//同樣有四種用法
$("div").fadeTo(1000, 0.5, function () {
alert(1);
});
})
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度為0.5</button>
<div></div>
</body>
</html>
1.6 自定義影片
語法：
$(selector).animate({params}, speed, callback);
作用：執行一組CSS屬性的自定義影片，
第一個引數表示：要執行影片的CSS屬性（必選）
第二個引數表示：執行影片時長（可選）
第三個引數表示：影片執行完后，立即執行的回呼函式（可選）
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="https://www.cnblogs.com/liuhui0308/p/jquery-2.1.0.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
//自定義影片
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("影片執行完畢！");
});
});
})
})
</script>
</head>
<body>
<button>自定義影片</button>
<div></div>
</body>
</html>
1.7 停止影片
$(selector).stop(true, false);
里面的兩個引數，有不同的含義，
第一個引數：
true：后續影片不執行，
false：后續影片會執行，
第二個引數：
true：立即執行完成當前影片，
false：立即停止當前影片，
引數如果都不寫，默認兩個都是false，實際作業中，直接寫stop()用的多，
案例：滑鼠懸停時，彈出下拉選單（下拉時帶影片）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: green;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="https://www.cnblogs.com/liuhui0308/p/jquery-2.1.0.js"></script>
<script>
//入口函式
$(document).ready(function () {
//需求：滑鼠放入一級li中，讓他里面的ul顯示，移開隱藏，
var jqli = $(".wrap>ul>li");
//系結事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
});
//系結事件(移開隱藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script>
</head>
<body>
<div >
<ul>
<li>
<a href="javascript:void(0);">一級選單1</a>
<ul>
<li><a href="javascript:void(0);">二級選單2</a></li>
<li><a href="javascript:void(0);">二級選單3</a></li>
<li><a href="javascript:void(0);">二級選單4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二級選單1</a>
<ul>
<li><a href="javascript:void(0);">二級選單2</a></li>
<li><a href="javascript:void(0);">二級選單3</a></li>
<li><a href="javascript:void(0);">二級選單4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三級選單1</a>
<ul>
<li><a href="javascript:void(0);">三級選單2</a></li>
<li><a href="javascript:void(0);">三級選單3</a></li>
<li><a href="javascript:void(0);">三級選單4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
javascript:void(0); //跟javascript:;效果一樣
上方代碼中，關鍵的地方在于，用了stop函式，再執行影片前，先停掉之前的影片，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31447.html
標籤：jQuery