【Day 15】jQuery效果

jQuery效果:

jQuery网页上方点选API Documentation

开启後，於网页左方，本篇是针对Effects里面列举基本项目

.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介绍】