|
课程大纲
jQuery内置基本动画jQuery自定义动画
jQuery内建核心函数- 重点：
jQuery文档的学习，学会参考jQuery文档开发网页效果
注意：参数speed、easing、fn三个参数动画大多都是通用了
1、内置动画
（1）显示/隐藏
jQuery语法中，提供了动画方式显示和隐藏指定标签的函数
1、show（）显示、2、hide（）隐藏、3、toggle（）开和关 之间的切换效果
-
show()：显示选择的元素?show( [speed, [easing], [fn]])
-
hide():隐藏选择的元素?hide([speed, [easing], [fn]])
-
toggle()：切换选择的元素的显示状态?toggle([speed, [easing], [fn])
??speed、easing、fn三个参数可以省略 -
注意：点击隐藏的时候他是 行内样式：display:none -
以下参数都可以使用：
-
speed、easing、fn三个参数可以省略
-
speed：
? 可选值slow（600ms）、normal（400ms）、fast(200ms)还可以是表示毫秒的整数 -
easing：
? 动画效果，默认swing(两头慢-中间快 缓动动画)，可选linear(线性动画-平滑动画-均速动画) -
fn：动画执行完成后的回调函数
// 正确方法：先 隐藏，再弹出alert
$("#box").hide(2000,function(){
alert("我要运动了")
})
// 错误方法：先 弹出，再隐藏
代码测试：
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">切换</button>
<hr>
<div id="box"></div>
<script src="js/libs/jquery/jquery.js"></script>
<script>
$(function() {
$("#btn1").click(function() {
$("#box").hide()
})
$("#btn2").click(function() {
$("#box").show()
})
$("#btn3").click(function() {
$("#box").toggle()
})
})
</script>
(2) 透明度动画
jQuery语法中，提供了透明度效果动画方式显示和隐藏指定标签的函数
-
fadeOut()：透明度变化直到 隐藏
-
fadeIn()：透明度变化直到 显示
-
fadeToggle()：透明度变化切换 如果是显示则隐藏，如果是隐藏则是显示。来回切换
-
fadeTo(value)：透明度变化到某个状态- 透明到多少 ``
-
? 参数： 时间参数如果不写，默认是400ms - `fadeOut()`时间参数可以不写
- ? `fadeOut(任意数值) `：`fadeOut(1000)`
- ? ` fadeOut(speed,callback)`
- `fadeIn()`时间参数可以不写
? ` fadeIn(任意数值)`:`fadeIn(1000)`
? ` fadeIn(speed,callback)`
- `fadeToggle()`时间参数可以不写
? `fadeToggle(任意数值)`:`fadeToggle(1000)`
? `fadeToggle(speed,callback)`
- `fadeTo(value)`时间参数可以不写
? `fadeTo(任意数值)`:`fadeTo(1000)`
? ` fadeTo(speed,透明度,callback)`
-
代码测试：
<script>
$(function(){
$("#btn1").click(function(){
$("div").fadeOut()
})
//btn2
$("#btn2").click(function(){
$("div").fadeIn()
})
//btn3
$("#btn3").click(function(){
$("div").fadeToggle()
})
//btn4
$("#btn4").click(function(){
$("div").fadeTo(1000,0.5)
})
})
</script>
(3)、卷帘动画
jQuery语法中，提供了卷帘效果动画方式显示和隐藏指定标签的函数
slideUp()?将一个元素向上收起直到隐藏slideDown()将一个元素向下拉开直到完整显示slideToggle()使用卷帘效果 显示/隐藏指定元素
代码测试：
<script>
$(function(){
$("#btn1").click(function(){
$("div").slideUp()
})
//btn2
$("#btn2").click(function(){
$("div").slideDown()
})
//btn3
$("#btn3").click(function(){
$("div").slideToggle()
})
})
</script>
2、自定义动画
jQuery`语法中，除了前面讲解的项目中使用较多的传统动画之外，自定义属性变化的动画也是比较常见的，所以也封装了自定义动画函数：
animate()：jQuery`内建函数，实现基本自定义动画
- 基于
css3有一个第三方动画库：animate.css
??animate(params,[speed],[easing],[fn])
params：表示必选参数
- 官方文档描述：一组包含作为动画属性和终值的样式属性和及其值的集合
- 如何理解：就是一个描述标签运动到目标终点的样式属性
speed：表示运动速度easing：表示切换方式fn：表示回调函数
代码测试：
<script>
$(function(){
$("#block").animate({
width: "90px",
height:"100px",
fontSize:"20px",
borderWidth: 10
},1000,"linear",function(){
alert("我运动完了")
},1000)
})
</script>
<script>
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000, "linear", function() {
console.log("我运动完成了")
});
</script>
课间小任务：使用jQuery提供的animate()自定义动画函数，实现一个简单的位置切换轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
height: 300px;
border: 1px solid brown;
margin: 20px auto;
position: relative;
}
#box img{
width: 500px;
height: 300px;
position: absolute;
left: 500px;
}
#box img:nth-of-type(1){
left: 0;
}
#box img:nth-of-type(1){
z-index: 5;
}
#box img:nth-of-type(2){
z-index: 4;
}
#box img:nth-of-type(3){
z-index: 3;
}
#box img:nth-of-type(4){
z-index: 2;
}
#box img:nth-of-type(5){
z-index: 1;
}
</style>
</head>
<body>
<div id="box">
<img src="../images/x1.jpg" alt="">
<img src="../images/x2.jpg" alt="">
<img src="../images/x3.jpg" alt="">
<img src="../images/x4.jpg" alt="">
<img src="../images/x5.jpg" alt="">
</div>
<script src="../js/libs/jquery-3.6.0.js"></script>
<script>
$(function(){
//注释：自己的大白话，随便写的
//1索引
var sunYin = 0
// 2img 的宽 500px
var imgWidth = 500
//3声明一个函数
function fn(){
//4把索引声明过来
var sin = sunYin
$("img").eq(sin).animate({
//left左移 img的宽500
left : -imgWidth
//回调函数.让前面的先移动。后面在移动
},500,function(){
//左移到-500位置后 ，他再回到原先的500位置
$("img").eq(sin).css({
left: imgWidth
},500)
})
// 索引让图片自加加
sunYin++
//判断 索引大于等于 img图片的个数的时候，让他回到第一张图片0，就是这几张图片轮播完后，让他从第一张开始播放
if(sunYin >= $("img").length){
sunYin = 0
}
// 右边的每一张图片自++ 移动到第一张开始的位置
$("img").eq(sunYin).animate({
left:0
},500)
}
// 计时器执行
var time = setInterval(function(){
fn()
},2000)
/**
* 浏览器可见性事件[重要重要重要]
*/
document.addEventListener("visibilitychange", function(){
console.log(document.hidden)
if(document.hidden) {
// 页面被挂起，清除计时器，节省资源
clearInterval(timer)
}
else {
// 页面呼出
timer = setInterval(function() {
autoPlay()
}, 3000)
}
});
})
</script>
</body>
</html>
课间小任务：尝试使用jQuery实现一个透明度切换的轮播图 提示：不需要使用自定义动画，使用内置动画就可以完成(fadeIn() / fadeOut())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
height: 300px;
border: 1px solid brown;
margin: 20px auto;
position: relative;
}
#box img{
width: 500px;
height: 300px;
position: absolute;
/* left: 500px; */
}
#box img:nth-of-type(1){
z-index: 5;
}
#box img:nth-of-type(2){
z-index: 4;
}
#box img:nth-of-type(3){
z-index: 3;
}
#box img:nth-of-type(4){
z-index: 2;
}
#box img:nth-of-type(5){
z-index: 1;
}
</style>
</head>
<body>
<div id="box">
<img src="./images/x1.jpg" alt="">
<img src="./images/x2.jpg" alt="">
<img src="./images/x3.jpg" alt="">
<img src="./images/x4.jpg" alt="">
<img src="./images/x5.jpg" alt="">
</div>
<script src="./js/libs/jquery-3.6.0.js"></script>
<script>
$(function(){
//
var imgss = 0
function fn(){
$("img").eq(imgss).fadeOut(2000)
imgss++
if(imgss >= $("img").length){
imgss = 0
}
$("img").eq(imgss).fadeIn(1000)
}
var time = setInterval(function(){
fn()
},2000)
/**
* 浏览器可见性事件[重要重要重要]
* 解释：把浏览器后台的时候，计时器他会自己执行
* 这段代码是让后台的时候停止，打开的时候再继续执行
*/
document.addEventListener("visibilitychange", function(){
console.log(document.hidden)
if(document.hidden) {
// 页面被挂起，清除计时器，节省资源
clearInterval(timer)
}
else {
// 页面呼出
timer = setInterval(function() {
autoPlay()
}, 3000)
}
});
})
</script>
</body>
</html>
3、拓展
(1) 动画序列
很多时候需要停止匹配元素正在进行的动画，如果需要在某处停止动画，需要使用stop( ),而finish（）则是索引运动立即到终点
jQuery给默认的动画序列提供一个终止函数：
? 停止当前的，同时阻止后续的
-
注意：一般在操作过程中，使用第一个参数；第二个参数很少使用 $("box").stop()；没有参数，默认只停止当前正在进行的运动，后续的运动继续
$("box").stop(true)；停止当前的，同时阻止后续的
$("box").stop(true，true)；当前动画到完成状态，停止后续动画
$("box").finish()；索引的动画均到完成状态
动画切换
注意：如果连续点击的话 ，如连续点击10次，他会一直到执行10次，才停止
推荐：1.用的比较多点
// 1111111111111
<body>
<button>动画切换</button>
<div id="box"></div>
<script src="../js/libs/jquery-3.6.0.js"></script>
<script>
$(function(){
$("button").click(function(){
$("#box").toggle("slow")
})
})
</script>
</body>
// 22222222222222
<body>
<button>动画切换</button>
<div id="box"></div>
<script src="../js/libs/jquery-3.6.0.js"></script>
<script>
$(function(){
$("button").click(function(){
// stop(true) 每次动画执行时，清除排队动画队列
$("#box").stop(true).toggle("slow")
})
})
</script>
</body>
// 333333333333333
<body>
<button>动画切换</button>
<div id="box"></div>
<script src="../js/libs/jquery-3.6.0.js"></script>
<script>
$(function(){
$("button").click(function(){
// stop(true) 动画执行当前状态，停止后续动画
$("#box").stop(true，true).toggle("slow")
})
})
</script>
</body>
(2) 延迟动画
为了避免用户在页面中的一些误操作，可以给动画添加一些延迟效果
delay(duration)：让一个动画经过一定的时间之后再去执行
<body>
<div id="menu">菜单</div>
<div id="box"></div>
<script src="js/libs/jquery/jquery.js"></script>
<script>
$(function() {
// 鼠标经过时，延迟0.5s出现菜单
$("#menu").mouseover(function() {
$("#box").stop(true).delay(500).slideDown()
})
$("#menu").mouseout(function() {
$("#box").stop(true).slideUp()
})
})
</script>
</body>
(3)?$.each()
优先推荐 隐式迭代遍历：如果针对需要遍历的每个子元素执行相同操作时，优先推荐！
其次推荐$.each()迭代遍历
其次推荐$(selector).each()遍历
最后推荐普通循环遍历
<body>
<ul>
<li class="active">标题</li>
<li>标题</li>
<li>标题</li>
</ul>
<script src="js/libs/jquery/jquery.js"></script>
<script>
$(function() {
$("li").click(function() {
// 1、隐式迭代
$("li").removeClass("active")
$(this).addClass("active")
// 2、传统for循环
for(var i = 0; i < $("li").length; i++) {
$("li").eq(i).removeClass("active")
}
$(this).addClass("active")
// 3、显示遍历
$("li").each(function(index, domObj){
domObj.className = ""
})
$(this).addClass("active")
// 4、jQuery 核心 遍历函数
$.each($("li"), function(index, domObj) {
domObj.className = ""
})
$(this).addClass("active")
})
})
</script>
</body>
(4)?$.map()
介绍：如果要对数据进行转换操作的话，推荐使用$.map()进行语法上的优化，提高开发效率
// 1、数组中的map
var arr = [1,2,3,4,5,6,7,8,9]
// 需求：将数组中的每个数据，获取它的3次方
var arr2 = arr.map(function(value, index) {return Math.pow(value, 3)})
console.log(arr, arr2)
// 2、jQuery中针对原生JS中只能对数组进行映射的操作
// 封装成为只要是类数组，都可以执行的映射操作了
var arr3 = $.map(arr, function(value, index) {
return Math.pow(value, 2)
})
console.log(arr, arr3)
(5)?$.extend([deep], target, object..)
该函数主要用于对象数据合并操作，在项目中的数据处理应用场景有两部分
代码操作：
$(function() {
// 1、JSON字面对象 合并
var tom = {
name: "汤姆",
age: 18
}
var jerry = {
subject: "WEB",
fav: "王者"
}
// 声明一个空白对象，用于存储合并后的数据
var tgt = {}
$.extend(tgt, tom, jerry)
console.log(tom, "tom")
console.log(jerry, "jerry")
console.log(tgt, "target合并后")
// 2、深拷贝
var obj = {
name: "OFFCN",
year: "2021",
subjects: ["HTML WEB"]
}
// 深拷贝: 将obj拷贝到target变量中
var target = $.extend(true, {}, obj)
obj["subjects"].push("JAVA")
console.log(obj, "obj")
console.log(target, "target")
})
(6)?JSON字面对象
什么是JSON字面对象
- 语法中使用花括号，包含起来的
key:value的形式的数据，可以通过key描述特征属性、value描述特征属性的数据，最后行成一个描述某个复杂事物的语法结构，称为JSON字面对象
// 描述了一个复杂对象：汤姆 var tom = { name: "汤姆", nickname: "tom", sex: "男", phone: "18899990000", addr: "home" }
JSON字面对象的类型？对象类型
typeof tom 'object' Object.prototype.toString.call(tom) '[object Object]'
实际项目中，我们一般使用JSON来传递数据，就需要在JSON格式的字符串和对象之间进行转换
// JSON格式字符串
var jsonStr = '{"name": "汤姆", "age": 18}'
// JSON格式对象
var jsonObj = {name: "汤姆", age: 18}
// JSON对象-> 字符串： JSON.stringify(obj)
var tom = {name: '汤姆', nickname: 'tom', sex: '男', phone: '18899990000', addr: 'home'}
typeof tom //'object'
JSON.stringify(tom)
// '{"name":"汤姆","nickname":"tom","sex":"男","phone":"18899990000","addr":"home"}'
// JSON字符串-> 对象：JSON.parse(str)
var s = '{"name":"汤姆","nickname":"tom","sex":"男","phone":"18899990000","addr":"home"}'
var obj = JSON.parse(s)
// {name: '汤姆', nickname: 'tom', sex: '男', phone: '18899990000', addr: 'home'}
JSON小总结
以后，网页中使用的数据，就可以通过JSON模拟
① 页面中的轮播图数据
var bannerJson = [
{imgSrc: "images/banner1.jpg", title: "xxx广告词"},
{imgSrc: "images/banner2.jpg", title: "xxx广告词"},
{imgSrc: "images/banner3.jpg", title: "xxx广告词"},
{imgSrc: "images/banner4.jpg", title: "xxx广告词"},
{imgSrc: "images/banner5.jpg", title: "xxx广告词"},
]
// 循环遍历bannerJson数据，将数据通过DOM操作，创建节点将图片渲染到页面中
② 网页中的商品数据
var goodsJson = [
{
name: "华硕笔记本",
price: 5888,
stock: 100,
description: "华硕品质，坚若磐石"
},
{
name: "外星人笔记本",
price: 19999,
stock: 200,
description: "外星人，笔记本中的天花板"
},
....
]
// 循环goodsJson，将数据通过DOM操作创建节点，渲染网页中展示商品数据
|