iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

菜菜菜的前端學習日誌系列 第 24

jQuery-隱藏/顯示效果

菜菜菜的前端學習日誌 - Day24

今天來介紹一些基本的語法

click

這 click 跟原生 js 的 onclick event是一樣的
用法如下:

<button class="click">可利可蜜</button>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        alert('haha');
      })
    });
</script>

我們透過點擊按鈕去跳出警告視窗

hide / show

接下來可以使用hideshow來讓元素隱藏及消失

<button class="click">可利可蜜</button>
<p class="test">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $(".test").hide();
      })
    });
</script>

這邊就練習一下隱藏的效果,如下:

toggle

但這樣子只能夠隱藏而已,元素就一直是隱藏的

當然我們也能夠透過其他語法來可以反覆執行隱藏及顯示

<button class="click">可利可蜜</button>
<p class="test">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $(".test").toggle();
      })
    });
</script>

fadeIn / fadeOut

上面所講的 hide 及 show 都是直接消失或隱藏沒有任何效果

而我們能透過 fadeInfadeOut 來達到淡入淡出的效果

而他也能夠設定要淡出/淡入效果的時間長短

參數總共有3個: fastslow毫秒

<button class="click">可利可蜜</button>
<p class="test1">Hello!! My name is Andy.</p>
<p class="test2">Hello!! My name is Andy.</p>
<p class="test3">Hello!! My name is Andy.</p>
<p class="test4">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $(".test1").fadeOut();
        $(".test2").fadeOut('fast');
        $(".test3").fadeOut('slow');
        $(".test4").fadeOut(5000);
      })
    });
</script>

效果就會像是這樣

fadeToggle

這樣也是只能夠淡出或淡入

但一樣的也能用另一個語法達到可以反覆執行

<button class="click">可利可蜜</button>
<p class="test1">Hello!! My name is Andy.</p>
<p class="test2">Hello!! My name is Andy.</p>
<p class="test3">Hello!! My name is Andy.</p>
<p class="test4">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $(".test1").fadeToggle();
        $(".test2").fadeToggle('fast');
        $(".test3").fadeToggle('slow');
        $(".test4").fadeToggle(5000);
      })
    });
</script>

fadeTo

另外也能夠只是改變透明度而已

一般我們想到改透明度就是透過改cssopacity

<button class="click">可利可蜜</button>
<p class="test1">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $(".test1").css("opacity","0.5");
      })
    });
</script>

而還有另外一種可以更簡單的方式去達到這效果,且能夠設定效果的速度有淡出的效果

<button class="click">可利可蜜</button>
<p class="test1">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $(".test1").fadeTo("slow",0.5);
      })
    });
</script>

slideDown / slideUp

接下來要講的這效果是會讓元素隱藏及顯示,但是效果不太一樣,讓我們來看看效果如何

我們一樣是透過點擊按鈕來觸發效果,讓文字隱藏

<button class="click">可利可蜜</button>
<p class="test1">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $(".test1").slideUp();
      })
    });
</script>


它一樣是隱藏了元素,但是它是以感覺像是收合的效果呈現

slideToggle

另外我們當然也是能夠點擊就能重複收放的效果

這效果就常用在製作RWD時,點擊漢堡將導覽列收合的效果


上一篇
jQuery
下一篇
jQuery 取值/設值 及 新增/刪除
系列文
菜菜菜的前端學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言