【Day 15】jQuery效果

13th鐵人賽

bonnieli1414

2021-09-15 20:23:27

1543 瀏覽

分享至

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>