目录
前言
一.隐藏和显示
1.1使用方法
1.2案例演示(1)
1.3隐藏/显示效果一键切换
二.淡入淡出效果
2.1使用方法
2.2案例演示(fadeIn)
2.3案例演示(fadeOut)
2.4案例演示(fadeToggle)
2.5案例演示(fadeTo)
三.滑动
3.1使用方法
3.2案例演示(slideDown)
3.3案例演示(slideUp)
3.4案例演示(slideToggle)
四.动画【重要】
4.1使用方法
4.2案例演示
4.3使用队列功能实现多个动画
五.停止动画
5.1使用方法
5.2案例演示
六.callback函数
6.1使用方法
6.2为什么要使用callback函数
七.chaining绑定
7.1chaining介绍
7.2chaining使用方法
7.3案例演示
前言
JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客
JQuery(二)---【使用JQuery对HTML、CSS进行操作】-CSDN博客
JQuery(三)---【使用JQuery动态设置浏览器窗口尺寸、JQuery的遍历】-CSDN博客
一.隐藏和显示
1.1使用方法
通过JQuery可以使用:“hide()”和“show()”方法来隐藏和显示HTML元素:
使用格式:
- “hide”:$(selector).hide(speed,callback)
- “show”:$(selector).show(speed,callback)
两个参数:
- speed:规定隐藏/显示的速度,可以取以下值:“slow”、“fast”、“100”(毫秒数值)
- callback:隐藏或显示完成后所执行的函数
1.2案例演示(1)
下面是一个:“点击按钮来控制div标签显示/隐藏的案例”
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><p id="p1">如果点击“隐藏”按钮,我就会消失</p><button id="hide">隐藏</button><button id="show">显示</button><script>$(document).ready(function(){$("#hide").click(function(){$("#p1").hide();});$("#show").click(function(){$("#p1").show();});});</script>
</body>
</html>
点击前:
点击后:
1.3隐藏/显示效果一键切换
除了手动使用:“hide()”和“show()”方法来设置某个元素的状态,我们还可以使用:“toggle()”方法来自动进行状态的切换,切换规则如下:
- “如果当前是显示状态,那么就会切换到隐藏状态”
- “如果当前是隐藏状态,那么就会切换到显示状态
使用格式:
- $(selector).toggle(speed,callback)
这里的“speed”和“callback”参数使用同上,就不再赘述了
二.淡入淡出效果
2.1使用方法
通过JQuery可以实现元素的淡入淡出,即渐变式消失/隐藏
我们通过以下四种方法实现:
- “fadeIn(speed,callback)”:淡入已隐藏元素(将隐藏元素渐变的显示出来)
- “fadeOut(speed,callback)”:淡出可见元素(将可见元素渐变的隐藏)
- “fadeToggle(speed,callback)”:淡入隐藏/可见元素(将隐藏/可见元素渐变的显示/隐藏)
- “fadeTo(speed,opacity,callback)”:淡出可见元素(将可见元素渐变的隐藏)同时允许指定淡出的不透明度(值介于0-1之间)
2.2案例演示(fadeIn)
下面是一个:“点击按钮之后,将三个隐藏的不同颜色的矩形渐变的显示出来”
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><p>演示带有不同参数的fadeIn方法</p><button id="bt1">点击之后,将三个矩形淡入</button><br><br><div id="div1" style="width: 80px;height: 80px;background-color: red;margin: 10px;display: none;"></div><div id="div2" style="width: 80px;height: 80px;background-color: green;margin: 10px;display: none;"></div><div id="div3" style="width: 80px;height: 80px;background-color: blue; margin: 10px;display: none;"></div><script>$(document).ready(function(){$("#bt1").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script>
</body>
</html>
点击前:
点击后:
动图不方便制作,建议小伙伴们自己敲一下代码,看一下这个动画效果
2.3案例演示(fadeOut)
下面是一个:“点击按钮之后,将三个不同颜色的矩形渐变的隐藏”
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><p>演示带有不同参数的fadeIn方法</p><button id="bt1">点击之后,将三个矩形淡入</button><br><br><div id="div1" style="width: 80px;height: 80px;background-color: red;margin: 10px;"></div><div id="div2" style="width: 80px;height: 80px;background-color: green;margin: 10px;"></div><div id="div3" style="width: 80px;height: 80px;background-color: blue; margin: 10px;"></div><script>$(document).ready(function(){$("#bt1").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);});});</script>
</body>
</html>
点击前:
点击后:
2.4案例演示(fadeToggle)
下面是一个:“点击按钮之后,将三个不同颜色的矩形渐变的隐藏/显示”
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><p>演示带有不同参数的fadeIn方法</p><button id="bt1">点击之后,将三个矩形切换状态</button><br><br><div id="div1" style="width: 80px;height: 80px;background-color: red;margin: 10px;"></div><div id="div2" style="width: 80px;height: 80px;background-color: green;margin: 10px;"></div><div id="div3" style="width: 80px;height: 80px;background-color: blue; margin: 10px;"></div><script>$(document).ready(function(){$("#bt1").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});});</script>
</body>
</html>
效果:
建议小伙伴自己敲代码看一下过程,这个动画还是很不错的!
2.5案例演示(fadeTo)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><p>演示带有不同参数的fadeIn方法</p><button id="bt1">点击之后,将三个矩形切换状态</button><br><br><div id="div1" style="width: 80px;height: 80px;background-color: red;margin: 10px;"></div><div id="div2" style="width: 80px;height: 80px;background-color: green;margin: 10px;"></div><div id="div3" style="width: 80px;height: 80px;background-color: blue; margin: 10px;"></div><script>$(document).ready(function(){$("#bt1").click(function(){$("#div1").fadeTo("slow",0.15);$("#div2").fadeTo("slow",0.4);$("#div3").fadeTo("slow",0.7);});});</script>
</body>
</html>
效果:
三.滑动
3.1使用方法
使用JQuery可以使元素实现滑动效果
JQuery提供了三种方法供我们滑动:
- “slideDown(speed,callback)”:向下滑动元素
- “slideUp(speed,callback)”:向上滑动元素
- “slidToggle(speed,callback)”:在向上/向下滑动之间自动切换
3.2案例演示(slideDown)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><style>.flip{width: 200px;background-color: #e5eecc;border: solid 1px #c3c3c3;text-align: center;padding: 5px;margin: 0px;}div.flip{height: 120px;display: none;}</style>
</head>
<body><p class="flip">请点击这里</p><div class="flip"><p>这是一个例子</p><p>这是另一个例子</p></div><script>$(document).ready(function(){$("p.flip").click(function(){$("div.flip").slideDown("slow");});});</script>
</body>
</html>
点击前:
点击后:
3.3案例演示(slideUp)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><style>.flip{width: 200px;background-color: #e5eecc;border: solid 1px #c3c3c3;text-align: center;padding: 5px;margin: 0px;}div.flip{height: 120px;}</style>
</head>
<body><div class="flip"><p>这是一个例子</p><p>这是另一个例子</p></div><p class="flip">请点击这里</p><script>$(document).ready(function(){$("p.flip").click(function(){$("div.flip").slideUp("slow");});});</script>
</body>
</html>
点击前:
点击后:
3.4案例演示(slideToggle)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><style>.flip{width: 200px;background-color: #e5eecc;border: solid 1px #c3c3c3;text-align: center;padding: 5px;margin: 0px;}div.flip{height: 120px;}</style>
</head>
<body><div class="flip"><p>这是一个例子</p><p>这是另一个例子</p></div><p class="flip">请点击这里</p><script>$(document).ready(function(){$("p.flip").click(function(){$("div.flip").slideToggle("slow");});});</script>
</body>
</html>
效果:
使用“slideToggle”之后我们可以很方便的实现对元素滑动的控制
而使用“slideUp”和“slideDown”实现滑动,只能是单侧方向,并不能“收回”
四.动画【重要】
4.1使用方法
JQuery支持我们创建自定义的动画,从而实现“花里胡哨”的功能
使用“animate()”方法可以创建一个自定义动画
使用方法:
- $(selector).animate({params},speed,callback)
参数说明:
- params参数定义形成动画的CSS属性
- speed规定动画的时长,可以取:“slow”、“fast”、“100(数值单位)”(毫秒)
- callback表示动画完成后执行的函数
通过使用animate我们可以修改一个元素的“几乎所有的CSS”属性,从而实现更加复杂的动画效果
PS:“如果我们需要对某个元素实现移动动画,需要将这个元素的position属性设置为absolute、relative、fixed其中一种”
4.2案例演示
下面是一个:“点击按钮后,div矩形向右移动,并且透明度为50%,高度/宽度变为150”
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><button>开始动画</button><p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background-color: aqua;height: 100px;width: 100px;position: absolute;"></div><script>$(document).ready(function(){$("button").click(function(){$("div").animate({left : '250px',opacity : '0.5',height : '150px',width : '150px'});});});</script>
</body>
</html>
点击前:
点击后:
(ps:“除了使用固定值来控制移动的距离,我们也可以使用相对值来控制元素的移动,使用方法是在值的前面加上’+=‘或’-=‘来表示加或减”)
4.3使用队列功能实现多个动画
如果我们想要一次执行多个连续的动画,我们就需要使用:“队列”的功能
使用方法也很简单,就是一次性写入多个animate()方法即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><button>开始动画</button><p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background-color: aqua;height: 100px;width: 100px;position: absolute;"></div><script>$(document).ready(function(){$("button").click(function(){$("div").animate({height : '300px',opacity : '0.4'},"slow");$("div").animate({width : '300px',opacity : '0.8'},"slow");$("div").animate({height : '100px',opacity : '0.4'},"slow");$("div").animate({height : '100px',opacity : '0.8'},"slow");});});</script>
</body>
</html>
效果:
图片会不断进行依次进行四个方向的拉伸
五.停止动画
5.1使用方法
JQuery提供“stop()”方法在动画结束之前强制停止动画
使用方法:
- $(selector).stop(stopAll,goToEnd);
参数说明:
- stopAll规定是否应该清除动画队列,默认是false,只停止这个动画,该动画所属队列中的其他动画不停止
- goToEnd规定是否立即完成当前动画(相当于强制完成动画省略过程也算停止了),默认是false
5.2案例演示
下面是一个:“点击按钮后,div标签内容出现并且以很慢的速度向下滑动,直到点击停止滑动或者点击按钮停止”
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><button>停止滑动</button><p id="sample">点我向下滑动面板</p><div style="background-color: aqua;height: 200px;width: 200px;display: none;"><p>这是一个例子</p></div><script>$(document).ready(function(){$("#sample").click(function(){$("div").slideDown(5000);});$("button").click(function(){$("div").stop();});});</script>
</body>
</html>
效果:
六.callback函数
6.1使用方法
callback函数用来在动画100%完成后执行
callback函数将一个函数名作为一个参数传递给它
6.2为什么要使用callback函数
我们假设一个场景:“假设我们点击一个按钮之后,<p>段落会逐渐消失,并且在消失完成后会弹出一个弹窗提示<p>段落已经消失”
我们先看看不使用callback的状态:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><button>点我隐藏段落</button><p id="sample">这是一个示例段落</p><script>$(document).ready(function(){$("button").click(function(){$("#sample").hide();alert("段落被成功隐藏了");});});</script>
</body>
</html>
点击后:
可以看到,段落还没被隐藏,弹窗就已经出现了,此时我们点击“确定”后,段落才会被隐藏,这显而是不正确的。
错误原因:如果大家接触过软件开发,会明白软件开发中经常要用到多线程,在这里“隐藏功能”被视作一个“子线程”,而“弹窗”被视作一个“主线程”,此时“主线程”堵塞了“子线程”
如果我们使用callback函数,可以很好的解决这个问题:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><button>点我隐藏段落</button><p id="sample">这是一个示例段落</p><script>$(document).ready(function(){$("button").click(function(){$("#sample").hide(1000,function(){alert("段落被成功隐藏了");});});});</script>
</body>
</html>
效果:
可以看到在动画完成后,弹窗才会出现
七.chaining绑定
7.1chaining介绍
JQuery允许我们将方法链接起来,使用链接可以方便我们对某些方法的复用
例如:“假设我们有一个id为p1的段落,我们想要它执行slideDown方法和slideUp方法”,我们可以很轻松的写出下面代码:
$("#p1").slideUp(1000);
$("#p1").slideDown(1000);
可以看到,我们写了两条语句,让这个元素执行这个两个功能
但是如果一个元素需要执行非常多的功能,假设有100个,我们就要写100条语句,这对于“程序员”来说很不方便!
为此,我们可以使用链接来简化书写!
7.2chaining使用方法
chaining使用方法:
- $(selector).方法1.方法2.方法3.方法4.....
7.3案例演示
下面的例子:
将css(),slideUp(),sildeDown()链接在p1上
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("#p1").css("color","red").slideUp(2000).slideDown(2000);});
});
</script>
</head><body><p id="p1">jQuery 乐趣十足!</p>
<button>点击这里</button></body>
</html>
效果:
点击后p1会“依次”执行:“css()”、“slideUp”、“slideDown”