jQuery 筆記 - 使用 fadeToggle 產生按鈕互動

這是專案上所提出的一個使用情境，不是很新穎的技術，但會是一個綜合使用體驗的安排，記錄一下該功能與語法的內容。使用到的技術與語法如下：

jQuery function:
- fadeIn();
- fadeOut();
- fadeToggle();
SCSS 預處理器。
CSS3 function calc。

起源

PM 某天跑來這樣說：
這個頁面一開始看不到資訊頁內容，會有一個視窗蓋在畫面前面，要加上一個關閉按鈕，希望關閉後可以透過點擊按鈕再次叫出與關閉，資訊頁需要一個按鈕獨立控制。

整串聽完只聽到一直開開關關…

歸類有下方條件：

一開始有一個小視窗。
一開始資訊頁是看不見的。
會有一個按鈕可以開啟資訊頁。
會有一個按鈕可以控制小視窗頁開跟關。

版面處理

使用 CSS3 function calc 方式做規劃，分成兩邊，一邊為 width: calc(100% * 4 / 12);，資訊頁為 width: calc(100% * 4 / 12);，這個方法真的非常好用啊!

看一下 HTML 的結構分成三塊，兩個 button，小視窗 .box，資訊頁 .info，

HTML

<div class="container">
  <div class="btnGroup">
    //button
    <h1>點擊按鈕產生互動</h1>
    <button class="toggleBtn">OPEN / CLOSE</button>
    <button class="openInfoBtn">CLICK TO SHOW INFO</button>
  </div>

  <div class="box">
    //小視窗
    <div class="box_container">
      <h2>哪一個用詞正確</h2>
      <ul class="li_Info">
        <li>這是一批賽馬</li>
        <li>這是一匹賽馬</li>
        <li>這只是普通馬</li>
      </ul>
      <button class="closeBtn">CLOSE</button>
    </div>
  </div>

  <div class="info">
    //資訊頁
    <img
      src="https://images.unsplash.com/photo-1588763475559-b854628a953c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1947&q=80"
    />

    <p>
      必須防止科技有限公司翻譯，默認確認，師傅環保積分是指條款，這個人們程度防止網遊，求職理由其實健康我的心環境篇文章給你我真幾乎，分類又有定義整合檢測登記手術登陸郵件少年異常電影寶寶簡直造型，全家特徵導航地上沒想到語音辦公水晶記憶經營研究生氣奇蹟高效，說了大。
    </p>
  </div>
</div>

因為一開始只有小視窗 .box，並且隱藏資訊頁 .info，所以這邊會使用 display:none / block 來呈現。

另外要讓小視窗「蓋在」資訊頁上面，變使用 z-index 的順序來制訂，這邊使用 99 (我預定範圍為 1~99，使用最高的階層，避免未來維護時不小心被蓋過)。並使用 position: absolute; 將其絕對定位在瀏覽器，因為沒有特別寫 position:relative; 在別的地方，所以就會預設瀏覽器為父元素。

.box

.box {
   display: block; //一開始顯示
   position: absolute;
   z-index: 99;
   top: 30%;
   left: 40%;

.info

1 2	.info { display: none; //一開始隱藏

完成基本畫面設置後，就要透過 jQuery 來做互動效果。這次是要透過按鈕來做互動，所以先來看一下按鈕，

1 2	<button class="toggleBtn">OPEN / CLOSE</button> <button class="openInfoBtn">CLICK TO SHOW INFO</button>

先綁定到 .toggleBtn 並產生 click 事件，當點擊此按鈕時， .box 小視窗，會於 0.5 秒淡出，再次點擊會於 0.5 秒後淡入，透過 fadeToggle(填入時間參數); 便可以實現此功能。

1
2
3

$(".toggleBtn").click(function () {
  $(".box").fadeToggle(500);
});

接者綁定 .openInfoBtn 並產生 click 事件，當點擊此按鈕時，會產生兩種行為，淡入顯示， .box 便淡出消失，

$(".openInfoBtn").click(function () {
  $(".info").fadeIn(300);
  $(".box").fadeOut(500);
});

最後在 .box 小視窗中也有一個 close 按鈕，也綁定 click 事件，點擊按鈕後，視窗會於 0.5 秒後淡出消失。

1
2
3

$(".closeBtn").click(function () {
  $(".box").fadeOut(500);
});

Codepen: https://codepen.io/hnzxewqw/pen/rNOddaX

提姆寫程式