DAY14-jQuery| 用jQuery產生動畫效果

第 11 屆 iThome 鐵人賽

DAY 14

自我挑戰組

網頁排版個人學習筆記系列第 14 篇

11th鐵人賽

echocarrie

2019-09-15 00:30:57

4194 瀏覽

分享至

click與hide標籤

點擊事件範例: 點選class button後，h1文字不見

$(document).ready(function() {
    $('.button').click(function(event) {
        $('h1').hide();
    });
});

toggle標籤

可自行偵測物件是隱藏或顯示狀態，並做調整
白話: 以按鈕為例，按button隱藏文字，再按一次顯示文字，可一直循環

$(document).ready(function() {
    $('.button').click(function(event) {
        $('h1').toggle();
    });
});

toggle另外一個有趣的用法範例
- 設h1與p(於html 寫 display:none;)，按下button就會和h1做一顯一隱效果

滑入滑出效果

slideDown 範例
透過滑入滑出效果顯示被隱藏的元素
- 操作方式
  1. 先於html內寫→button與textarea和送出按鈕
  2. 於css把textarea和送出按鈕隱藏 display:none;
  3. all.js檔中執行按下.button，.text會顯示出來

<input type="button" class="button" value="留言">
    <div class="text">
        <textarea name="area" cols="30" rows="10"></textarea>
        <input type="submit" value="send it">
    </div>

.text{
    display: none;
}

$(document).ready(function () {
    $('.button').click(function () {
        $('.text').slideDown(值);　/*可填寫時間以豪秒為單位*/
    });
});

slideUp
透過滑入滑出效果隱藏元素
slideToggle(常用) 範例
按button後自動偵測元素是隱藏或顯示，做滑入滑出效果作隱藏或顯示的切換動作(隱藏按一下就會出現，顯示時按一下會隱藏 )

$('選擇器').slideToggle(值);

淡入淡出效果-只使用jQuery產生動畫

只使用jQuery來產生動畫效果對瀏覽器負荷較重，所以比較推薦使用css搭配jQuery使用

fadeIn 範例
- 把預設隱藏的東西打開(慢慢增加半透明的值，漸漸看見預設隱藏的東西)
- 點選選擇器1的元素，會以淡入淡出方式顯示選擇器2元素

$(document).ready(function () {
    $('選擇器1').click(function () {
        $('選擇器2').fadeIn(以豪秒為單位的數值);
        
    });
});

fadeOut
- 把預設開啟的東西關閉
- 點選選擇器1的元素，會以淡入淡出方式隱藏選擇器2元素

$(document).ready(function () {
    $('選擇器1').click(function () {
        $('選擇器2').fadeOut(以豪秒為單位的數值);
        
    });
});

fadeToggle(常用) 範例
- 以淡入淡出的方式做隱藏或顯是的切換
- 點選選擇器1的元素，會以淡入淡出方式切換顯示或隱藏選擇器2元素

$(document).ready(function () {
    $('選擇器1').click(function () {
        $('選擇器2').fadeToggle(3000);
        
    });
});

淡入淡出效果-jQuery搭配CSS產生動畫

和單使用jQuery來產生動畫效果，jQuery搭配CSS產生動畫瀏覽器負荷較輕效能較好

範例
toggleClass
一般用jQuery寫效果，其實瀏覽器負荷相當重的。以淡出淡出為例，jQuery是以css不停的塞字進去(不透明1到0.90一直跑數字到0的方式來呈現)，另外動畫也要跟著一起跑出同時間要做很多事才能達成要的效果。
- 操作方式
  1. 用動態增加class名稱上去設計出動態效果，效能會比較好
  2. 選擇器中可使用opacity不透明度﹑transition漸變效果
  3. 按button會在動態增加一個class名稱叫active
  4. active語法就是會把裡面的內容打開的意思
  5. 可開chorm 檢視/ Elements看執行的變化

<body>
    <input type="button" class="button" value="留言">
    <div class="text active">
        <textarea name="area" cols="30" rows="10"></textarea>
        <input type="submit" value="send it">
    </div>    
</body>

.text{
   opacity:0;
   transition:all 3s;
}
.text.active{
   opacity:1;
}

$(document).ready(function () {
    $('.button').click(function () {
      $('.text').toggleClass('active');
     });
});

jQuery鏈式

在jQuery中如果想要連續某些效果，可於兩個效果中間加入點.即可。沒有限效果數量可一直以點延續下去
範例

$(document).ready(function() {
    $('.start').click(function(event) {
        $('.box').slideUp(3000).slideDown(2000);
    });
});

DAY13-jQuery| 環境建置

jQuery| 如何使用Chrome進行除錯與增加撰寫效率

系列文

網頁排版個人學習筆記共 30 篇

RSS系列文訂閱系列文

45 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22197 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

網頁排版個人學習筆記系列 第 14 篇