【Day 15】jQuery效果

jQuery效果:

jQuery网页上方点选API Documentation
https://ithelp.ithome.com.tw/upload/images/20210914/20140399QkKcPPeyLL.jpg

开启後,於网页左方,本篇是针对Effects里面列举基本项目
https://ithelp.ithome.com.tw/upload/images/20210914/20140399tvHPTzKLWi.jpg

.hide() #隐藏
.hide(speed) #设定毫秒後隐藏
.show() #显示
.show(speed) #设定毫秒後显示
.toggle() #原显示变隐藏;原隐藏变显示

参考如下:

<!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>
</head>
<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
          $("#hide").click(function(){
            $("p").hide();
          });
          $("#show").click(function(){
            $("p").show();
          });
        });
        </script>
    <p>如果点击"隐藏"按钮,就会隐藏;如果点击"显示"按钮,就会显示;点击"切换"按钮,则会隐藏或显示。</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
    <button id="toggle" type="button">切换</button>    
    <script src="js/all.js"></script>
</body>
</html>

.fadeIn() #淡入
.fadeOut() #淡出
.fadeTo() #变成透明,透明度以0-1设定,数字越小越透明
.fadeToggle(speed,callback) #原淡入变淡出;原淡出变淡入

参考如下:

<!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>
</head>
<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
          $("button").click(function(){
            $("#div1").fadeIn(5000);
            $("#div2").fadeOut("slow");
            $("#div3").fadeToggle(5000);
            $("#div4").fadeTo("slow",0.5);
          });
        });
        </script>
    <p>演示带有不同参数的 fadeIn() 方法。</p>
    <button>点击这个按钮,让4个矩形淡入、淡出、切换、变半透明</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:yellow;"></div>
    <br>
    <div id="div4" style="width:80px;height:80px;display:none;background-color:blue;"></div>
    <script src="js/all.js"></script>
</body>
</html>

.slideUp() #向上滑动
.slideDown() #向下滑动
.slideToggle() #原向上滑动变向下滑动;原向下滑动变向上滑动


参考如下:
<!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>
</head>
<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script> 
      $(document).ready(function(){
        $("#flip").click(function(){
          $("#panel").slideDown("slow");
        });
      });      
      $(document).ready(function(){
        $("#flip2").click(function(){
          $("#panel2").slideUp("slow");
        });
      });
      $(document).ready(function(){
        $("#flip3").click(function(){
          $("#panel").slideToggle(3000);
          $("#panel2").slideToggle(3000);
        });
      });
      </script>
      <style> 
      #panel, #flip {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
      }      
      #panel {
        padding: 50px;
        display: none;
      }

      #panel2, #flip2 {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
      }      
      #panel2 {
        padding: 50px;       
      }

      #panel3, #flip3 {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
      }      
      #panel3 {
        padding: 50px;
        display: none;
      }
      </style>
    <div id="flip">点击这个按钮来向下滑动panel</div>
    <div id="flip2">点击这个按钮来向上滑动pane2</div>
    <div id="flip3">点击这个按钮来向上下切换滑动pane1和pane2</div>
    <div id="panel">Hello jQuery!</div>
    <div id="panel2">Hello jQuery!</div>    
    <script src="js/all.js"></script>
</body>
</html>

.animate() #生成动画效果,
.stop() #在动画效果完成前停止

参考如下:

<!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>
</head>
<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
          $("#animate").click(function(){
            $("div").animate({left:'250px'},5000);
          });      
          $("#stop").click(function(){
            $("div").stop();
          });  
        });
    </script>
    <button id="animate" type="button">开始动画</button>
    <button id="stop" type="button">停止动画</button>    
    <p>所有 HTML 元素的位置预设都是静态无法移动的。如需对位置进行操作,记得先将元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
</body>
</html>

<<:  Day15. 用Blue Prism放榜,紧张时刻-BP Choice Stage选择阶段

>>:  【第一天 - CTF介绍】

找个指导教授怎麽这麽难 QQ

本篇来分享我录取研究所以後寻找指导教授的故事! 进入正题 如果是正在念/已经毕业的硕士生都会知道找教...

Day 16 - 取得帐务相关资讯 (上)

本篇重点 api.list_positions api.list_profit_loss api.l...

第10-2章:监控与管理作业系统上之程序(二)

前言 在上一章节中,讲述了Linux process之基本原理与机制,以及控制jobs工作的方法,并...

Day 28 : 案例分享(8.2) 讯息、邮件与线上会议 - 线上会议 odoo15 新功能

功能说明 odoo在其运用中,讯息及讨论,一直是个标准的内附功能 在各单据中都可直接发送讯息给相关内...

CLOUDWAYS虚拟主机限时首二月7折优惠码,只到2021/9/5

优惠码SUMMER30 优惠时间:只到2021/9/5 折扣内容:首2个月7折(适用於所有方案) ☞...