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

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

click

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

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

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

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

hide / show

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

<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 都是直接消失或隱藏沒有任何效果

而我們能透過 fadeIn 及 fadeOut 來達到淡入淡出的效果

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

參數總共有3個： fast、slow及毫秒

<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

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

一般我們想到改透明度就是透過改css的opacity

<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

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

這效果就常用在製作ＲＷＤ時，點擊漢堡將導覽列收合的效果