jQuery 效果

编程语言 jikk345 487℃ 0评论
一、效果- 隐藏和显示
1、jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>隐藏和显示</title>
  6. </head>
  7. <body>
  8. <p id="yincang">点击隐藏按钮,我会消失</p>
  9. <p id="xianshi">点击显示按钮,我会显示</p>
  10. <button id="show">显示</button>
  11. <button id="hide">隐藏</button>
  12. <!--下列需要分开写,调用jquery-->
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <!--下列功能单独在,这写测试过-->
  15. <script>
  16. $(document).ready(function(){
  17. $("#show").click(function(){ //获取show的id,并触发click鼠标事件调用function获取HTML的p标签显示
  18. $("p").show()
  19. });
  20. $("#hide").click(function(){ //获取show的id,并触发click鼠标事件调用function获取id为yincang的标签隐藏
  21. $('#yincang').hide()
  22. });
  23. });
  24. </script>
  25. </body>
  26. </html>

结果
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>hide遮蔽功能</title>
  6. </head>
  7. <body>
  8. <button>隐藏</button>
  9. <p>这是隐藏段落1</p>
  10. <p>这是隐藏段落1</p>
  11. <p>这是隐藏段落1</p>
  12. <p>这是隐藏段落1</p>
  13. <!--下列需要分开写,调用jquery-->
  14. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  15. <!--下列功能单独在,这写测试过-->
  16. <script>
  17. //下列代码第一个function获取的是HTTP标签button模块
  18. //下列第二个function获取的是HTTP的p标签,并且通过click鼠标事件触发并通过hide遮盖起来
  19. $(document).ready(function(){
  20. $("button").click(function(){
  21. $("p").hide(10000); //hide使用speed方法。默认是0毫秒 ,这里写成10000毫秒测试用,结果会非常慢的收起隐藏内容
  22. });
  23. });
  24. </script>
  25. </body>
  26. </html>
结果

2、 jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>toggle()</title>
  6. </head>
  7. <body>
  8. <button>显示/隐藏</button>
  9. <p>通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。</p>
  10. <p>显示被隐藏的元素,并隐藏已显示的元素:</p>
  11. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <!--下列功能单独在,这写测试过-->
  13. <script>
  14. $(document).ready(function(){
  15. $("button").click(function(){ //获取html标签必须加引号
  16. $("p").toggle(); //通过toggle可以实现点一下显示点一下关闭
  17. });
  18. });
  19. </script>
  20. </body>
  21. </html>
结果
二、效果 – 淡入淡出

jQuery Fading 方法
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
1、jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法
  1. jQuery fadeIn() 用于淡入已隐藏的元素。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
  9. <button>点击淡入 div 元素。</button>
  10. <br>
  11. <div id="div1" style="width: 80px;height: 80px;display: none;background-color: red"></div>
  12. <div id="div2" style="width: 80px;height: 80px;display: none;background-color: green"></div>
  13. <div id="div3" style="width: 80px;height: 80px;display: none;background-color: blue"></div>
  14. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  15. <script>
  16. $(document).ready(function(){
  17. $("button").click(function(){
  18. $("#div1").fadeIn();
  19. $("#div2").fadeIn("slow"); // slow是慢显示,normal是正常,fast是快速显示
  20. $("#div3").fadeIn(3000); //3000毫秒显示
  21. })
  22. })
  23. </script>
  24. </body>
  25. </html>
结果
2、jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>显示已经隐藏的</title>
  6. </head>
  7. <body>
  8. <A>以下实例演示了 fadeOut() 使用了不同参数的效果。</A>
  9. <button>显示div 元素。</button>
  10. <div id="div1" style="width: 80px;height: 80px;background-color: red"></div> <!--去掉之前的display: none,所以颜色显示出来了-->
  11. <div id="div2" style="width: 80px;height: 80px;background-color: green"></div>
  12. <div id="div3" style="width: 80px;height: 80px;background-color: blue"></div>
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $("button").click(function(){
  17. $("#div1").fadeOut();
  18. $("#div2").fadeOut("slow");
  19. $("#div3").fadeOut(3000);
  20. })
  21. })
  22. </script>
  23. </body>
  24. </html>
  25. </body>
  26. </html>
结果

3、jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>fadeToggle()显示和隐藏</title>
  6. </head>
  7. <body>
  8. <A>jQuery fadeToggle() 方法可以在 fadeIn() fadeOut() 方法之间进行切换。</A>
  9. <button>点击淡入/淡出</button>
  10. <div id="div1" style="width: 80px;height: 80px;background-color: red"></div> <!--去掉之前的display: none,所以颜色显示出来了-->
  11. <div id="div2" style="width: 80px;height: 80px;background-color: green"></div>
  12. <div id="div3" style="width: 80px;height: 80px;background-color: blue"></div>
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $("button").click(function(){
  17. $("#div1").fadeToggle();
  18. $("#div2").fadeToggle();
  19. $("#div3").fadeToggle();
  20. });
  21. });
  22. </script>
  23. </body>
  24. </html>
 结果

 4、jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
必需的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>透明度</title>
  6. </head>
  7. <body>
  8. <A>jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 1 之间)</A>
  9. <button>点我让颜色变淡</button>
  10. <div id="div1" style="width: 80px;height: 80px;background-color: red"></div> <!--去掉之前的display: none,所以颜色显示出来了-->
  11. <div id="div2" style="width: 80px;height: 80px;background-color: green"></div>
  12. <div id="div3" style="width: 80px;height: 80px;background-color: blue"></div>
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $('button').click(function(){
  17. $('#div1').fadeTo("slow",0.15); //透明度0.15
  18. $('#div2').fadeTo("slow",0.4); //透明度0.4
  19. $('#div3').fadeTo("slow",0.7); //透明度0.7
  20. });
  21. });
  22. </script>
  23. </body>
  24. </html>
结果
三、效果 – 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()
1、jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>向下滑动</title>
  6. <style type="text/css">
  7. #panle,#flip{
  8. padding:5px;
  9. text-align: center;
  10. background-color: #c8e5bc;
  11. border:solid 1px #3c3c3c;
  12. }
  13. #panle {
  14. padding: 50px;
  15. display: none;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="flip">点我滑下面板</div>
  21. <div id="panle">Hello~Qinglin</div>
  22. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  23. <script>
  24. $(document).ready(function(){
  25. $('#flip').click(function(){
  26. $('#panle').slideDown('slow')
  27. });
  28. });
  29. </script>
  30. </body>
  31. </html>
结果
2、slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. #panle,#flip{
  8. padding:5px;
  9. text-align: center;
  10. background-color: #c8e5bc;
  11. border:solid 1px #3c3c3c;
  12. }
  13. #panle {
  14. padding: 50px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="flip">点我滑下面板</div>
  20. <div id="panle">Hello~Qinglin</div>
  21. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  22. <script>
  23. $(document).ready(function(){
  24. $('#flip').click(function(){
  25. $('#panle').slideUp('slow')
  26. });
  27. });
  28. </script>
  29. </body>
  30. </html>
结果

3、jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>向上向下滑</title>
  6. <style type="text/css">
  7. #panle,#flip{
  8. padding:5px;
  9. text-align: center;
  10. background-color: #c8e5bc;
  11. border:solid 1px #3c3c3c;
  12. }
  13. #panle {
  14. padding: 50px;
  15. display: none;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="flip">点我滑上/下面板</div>
  21. <div id="panle">Hello~Qinglin</div>
  22. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  23. <script>
  24. $(document).ready(function(){
  25. $('#flip').click(function(){
  26. $('#panle').slideToggle('slow')
  27. });
  28. });
  29. </script>
  30. </body>
  31. </html>
结果
四、效果 – 动画
1、animate() 方法
jQuery animate() 方法用于创建自定义动画。
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素:
 注:默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>动画向左移动</title>
  6. </head>
  7. <body>
  8. <button>
  9. 开始动画
  10. </button>
  11. <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
  12. 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  13. <div style="background-color:#98bf21;height: 100px;width: 100px;position: absolute"></div>
  14. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  15. <script>
  16. $(document).ready(function () {
  17. $('button').click(function () {
  18. $("div").animate({left:'250px'})
  19. });
  20. });
  21. </script>
  22. </body>
  23. </html>
结果
2、jQuery animate() – 操作多个属性
请注意,生成动画的过程中可同时使用多个属性:
注:可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>animate() - 操作多个属性</title>
  6. </head>
  7. <body>
  8. <button>开始动画</button>
  9. <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
  10. 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  11. <div style="background-color: #98bf21;height: 100px;width: 100px;position: absolute"></div>
  12. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function(){
  15. $("button").click(function(){
  16. $("div").animate({
  17. left:"250px",
  18. opactiy:"0.5",
  19. height:"150px",
  20. width:'150px'
  21. })
  22. })
  23. })
  24. </script>
  25. </body>
  26. </html>
结果

 3、jQuery animate() – 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>animate() - 操作多个属性</title>
  6. </head>
  7. <body>
  8. <button>开始动画</button>
  9. <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
  10. 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  11. <div style="background-color: #98bf21;height: 100px;width: 100px;position: absolute"></div>
  12. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function(){
  15. $("button").click(function(){
  16. $("div").animate({
  17. left:"250px",
  18. height:"+=150px",
  19. width:'+=150px'
  20. })
  21. })
  22. })
  23. </script>
  24. </body>
  25. </html>
结果
4、jQuery animate() – 使用预定义的值
您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>animate() - 使用预定义的值</title>
  6. </head>
  7. <body>
  8. <button>开始动画收起/放下</button>
  9. <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
  10. 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  11. <div style="background-color: #98bf21;height: 100px;width: 100px;position: absolute"></div>
  12. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function(){
  15. $("button").click(function(){
  16. $("div").animate({
  17. height:"toggle"
  18. })
  19. })
  20. })
  21. </script>
  22. </body>
  23. </html>
结果
5、jQuery animate() – 使用队列功能

默认地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。
例1:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>animate() - 使用队列功能</title>
  6. </head>
  7. <body>
  8. <button>开始动画</button>
  9. <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
  10. 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  11. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  12. </div>
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $('button').click(function(){
  17. var div = $("div");
  18. div.animate({'height':'300px','opacity':'0.4'},"slow");
  19. div.animate({'width':'300px','opacity':'0.4'},"slow");
  20. div.animate({'height':'300px','opacity':'0.4'},"slow");
  21. div.animate({'width':'300px','opacity':'0.4'},"slow");
  22. })
  23. })
  24. </script>
  25. </body>
  26. </html>
结果
 
例2:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>animate() - 使用队列功能</title>
  6. </head>
  7. <body>
  8. <button>开始动画</button>
  9. <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
  10. 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  11. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  12. </div>
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $('button').click(function(){
  17. var div = $("div");
  18. div.animate({'height':'300px'},"slow");
  19. div.animate({'width':'300px'},"slow")
  20. });
  21. });
  22. </script>
  23. </body>
  24. </html>
结果
五、jQuery 停止动画
1、jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法,不带参数:
 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>停止动画</title>
  6. <style>
  7. #panel,#flip{
  8. padding:5px;
  9. text-align: center;
  10. background-color: #c8e5bc;
  11. border: solid 1px #3c3c3c;
  12. }
  13. #panel{
  14. padding: 50px;
  15. display: none;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <button id="stop">停止滑动</button>
  21. <div id="flip">点我向下滑动面板</div>
  22. <div id="panel">Hello~ Qinglin</div>
  23. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  24. <script>
  25. $(document).ready(function(){
  26. $('#flip').click(function(){
  27. $('#panel').slideDown(3000)
  28. });
  29. $('#stop').click(function(){
  30. $("#panel").stop()
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>
结果
六、Callback
1、jQuery 动画的问题

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子:$(“p”).hide(“slow”)
speed 或 duration 参数可以设置许多不同的值,比如 “slow”, “fast”, “normal” 或毫秒。
实例
以下实例在隐藏效果完全实现后回调函数:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>隐藏效果完全实现后回调函数</title>
  6. </head>
  7. <body>
  8. <button>隐藏</button>
  9. <p>我们段落内容,点击“隐藏”按钮我就会消失</p>
  10. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  11. <script>
  12. $(document).ready(function(){
  13. $("button").click(function(){
  14. $("p").hide("slow",function(){
  15. alert("段落现在被隐藏了")
  16. })
  17. })
  18. })
  19. </script>
  20. </body>
  21. </html>
结果

以下实例没有回调函数,警告框会在隐藏效果完成前弹出:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>隐藏效果完全实现后回调函数</title>
  6. </head>
  7. <body>
  8. <button>隐藏</button>
  9. <p>我们段落内容,点击“隐藏”按钮我就会消失</p>
  10. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  11. <script>
  12. $(document).ready(function(){
  13. $("button").click(function(){
  14. $("p").hide(1000);
  15. alert("现在段落被隐藏了")
  16. })
  17. })
  18. </script>
  19. </body>
  20. </html>
结果

七、jQuery – 链(Chaining)
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
1、jQuery 方法链接
直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。
不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示: 这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。”p1″ 元素首先会变为红色,然后向上滑动,再然后向下滑动:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css()、slideUp() 和 slideDown()链接在一起</title>
  6. </head>
  7. <body>
  8. <p id="p1">清麟教程</p>
  9. <button>点我</button>
  10. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  11. <script>
  12. $(document).ready(function(){
  13. $('button').click(function(){
  14. $('#p1').css('color','red').slideUp(2000).slideDown(2000)
  15. })
  16. })
  17. </script>
  18. </body>
  19. </html>
结果

 

转载请注明:清麟博客 » jQuery 效果

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址