[CSS]利用CSS3與JQuery達成開合面板特效

測試的chrome版本: 48.0.2564.97

其他版本或瀏覽器, 可能會有呈現上的差異, 請適當的修改各處的CSS

目的：用一張圖靜態的圖搞定特效

1.滑鼠移入時三角形變亮 

2.點擊時, 旋轉三角形與展開區域

下面是原料的原始碼

●CSS

    <style type="text/css">

        /*補間動畫*/

        @keyframes arrow {

        0%   { transform:rotate(0deg);}   /*初始的呈現*/

        100% { transform:rotate(90deg); -webkit-filter: brightness(200%);} /*最終的呈現*/

        }

        @keyframes arrow_close {

        0%   { transform:rotate(90deg);}

        100% { transform: rotate(0deg); -webkit-filter: brightness(100%);}

        }

        /*圖片套用的樣式*/

        .test-arrow {

            animation-name: arrow; /*使用的補間動畫*/

            animation-duration: 0.5s; /*動畫時間長度*/

            transform:rotate(90deg); /*相對於原圖的旋轉角度*/

            -webkit-filter: brightness(200%); /*相對於原圖的亮度*/

        }

        .test-arrow-close {

            animation-name: arrow_close;

            animation-duration: 0.5s;

            transform:rotate(0deg);

            -webkit-filter: brightness(100%); /**/

        }

    </style>

●混雜著asp.net的html(編譯到網頁時, 還是會回到html)

         <table class="fastFunc" style="width: 90%;">

           <tr style="background-color: #7292CC; color: #FFFFFF;">

                <td>

                    <img id="i_arrow" class="i_toggle" src="../BlueTriangle_glow.png" />快速停用

                </td>

           </tr>

           <tr>

<td>

               <asp:Panel id="arrow" CssClass="p_toggle" runat="server" BackColor="#C6DAF8">

                  //(自由發揮)

</asp:Panel>

               </td>

</tr>

        </table>

 重這邊開始有區別, 這裡是jQuery與js主要運作的地方

第一種, 較直觀的方法(直接指定ID)

優：簡單不容易指錯, 在測試和規劃初期可以減少需排除的錯誤, 相當適合只用一次的功能

缺：想重複使用功能時, 會需要寫進所需的code, 讓檔案大幅成長

    <script type="text/javascript">

        $(document).ready(function () {

            $("#arrow").hide();

            $("#i_arrow").mouseover(function () { $(this).css("-webkit-filter", "brightness(200%)") })

            $("#i_arrow").mouseout(function () { $(this).css("-webkit-filter", "brightness(100%)") })

            $("#i_arrow").click(function () {

                $(".fastFunc").slideToggle(300);

                if (this.className == "test-arrow") {

                    this.className = "test-arrow-close";

                }

                else

                    this.className = "test-arrow";

            });

        });

    </script>

第二種, 較抽象的方阿 (利用this與遍歷)

優：只需寫一次, 並透過適當的條件選擇, 就能套用在不同區塊

缺：不熟悉selector或架構尚未定型的開發中頁面, 使用此方法反而會增加困擾

    <script type="text/javascript">

        $(document).ready(function () {

            $(".p_toggle").hide();

            $(".fastFunc .i_toggle").mouseover(function () { $(this).css("-webkit-filter", "brightness(150%)") })

            $(".fastFunc .i_toggle ").mouseout(function () { $(this).css("-webkit-filter", "brightness(100%)") })

            $(".fastFunc .i_toggle").click(function () {

                $(this).parents("tr").next().find(".p_toggle").slideToggle(300);

                if (this.className == "test-arrow")

                    this.className = "test-arrow-close";

                else

                    this.className = "test-arrow";

            })

        });

    </script>

可以注意看, 其實程式碼差不多, 而是差別在selector的寫法