jQuery 效果

時間  2020-10-07
標籤 javascript css java ide 函數 動畫 this spa code orm 欄目 JQuery 简体版
原文   原文鏈接

1. jQuery 效果

​ jQuery 給咱們封裝了不少動畫效果，最爲常見的以下：javascript

  • 顯示隱藏：show() / hide() / toggle() ;css

  • 劃入畫出：slideDown() / slideUp() / slideToggle() ; java

  • 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; ide

  • 自定義動畫：animate() ;函數

注意：動畫

動畫或者效果一旦觸發就會執行，若是屢次觸發，就形成多個動畫或者效果排隊執行。this

jQuery爲咱們提供另外一個方法，能夠中止動畫排隊：stop() ;spa

1.1. 顯示隱藏

​ 顯示隱藏動畫，常見有三個方法：show() / hide() / toggle() ;code

​ 語法規範以下:orm

1. 顯示語法規範 

show([speed,[easing],[fn]])

2. 顯示參數 

（1）參數均可以省略， 無動畫直接顯示。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

1. 隱藏語法規範

hide([speed,[easing],[fn]])

2. 隱藏參數

（1）參數均可以省略， 無動畫直接顯示。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

1. 切換語法規範

toggle([speed,[easing],[fn]])

2. 切換參數

（1）參數均可以省略， 無動畫直接顯示。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。
 建議：平時通常不帶參數，直接顯示隱藏便可。

代碼演示

<body>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 通常狀況下，咱們都不加參數直接顯示隱藏就能夠了
        });
    </script>
</body>

1.2. 滑入滑出

​ 滑入滑出動畫，常見有三個方法：slideDown() / slideUp() / slideToggle() ;

​ 語法規範以下:

 

1. 下滑效果語法規範

slideDown([speed,[easing],[fn]])

2. 下滑效果參數

（1）參數均可以省略。
（2）speed:三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing:(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

1. 上滑效果語法規範

slideUp([speed,[easing],[fn]])

2. 上滑效果參數

（1）參數均可以省略。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

1. 滑動切換效果語法規範

slideToggle([speed,[easing],[fn]])

2. 滑動切換效果參數

（1）參數均可以省略。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

代碼演示

<body>
    <button>下拉滑動</button>
    <button>上拉滑動</button>
    <button>切換滑動</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑動 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑動 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑動切換 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

1.3 淡入淡出

​ 淡入淡出動畫，常見有四個方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

​ 語法規範以下:

1. 淡入效果語法規範

fadeIn([speed,[easing],[fn]])

2. 淡入效果參數

（1）參數均可以省略。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

1. 淡出效果語法規範

fadeOut([speed,[easing],[fn]])

2. 淡出效果參數

（1）參數均可以省略。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

1. 淡入淡出切換效果語法規範

fadeToggle([speed,[easing],[fn]])

2. 淡入淡出切換效果參數

（1）參數均可以省略。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

1. 漸進方式調整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

2. 效果參數

（1）opacity 透明度必須寫，取值 0~1 之間。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。必須寫
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

代碼演示

<body>
    <button>下拉滑動</button>
    <button>上拉滑動</button>
    <button>切換滑動</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑動 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑動 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑動切換 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

1.4 自定義動畫

​ 自定義動畫很是強大，經過參數的傳遞能夠模擬以上全部動畫，方法爲：animate() ;

​ 語法規範以下:

 

1. 語法

animate(params,[speed],[easing],[fn])

2. 參數 
（1）params: 想要更改的樣式屬性，以對象形式傳遞，必須寫。 屬性名能夠不用帶引號， 若是是複合屬性則須要採 取駝峯命名法 borderLeft。其他參數均可以省略。
（2）speed：三種預約速度之一的字符串(「slow」,「normal」, or 「fast」)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，默認是「swing」，可用參數「linear」。
（4）fn:  回調函數，在動畫完成時執行的函數，每一個元素執行一次。

代碼演示

<body>
    <button>動起來</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

1.5 中止動畫排隊

​ 動畫或者效果一旦觸發就會執行，若是屢次觸發，就形成多個動畫或者效果排隊執行。

​ 中止動畫排隊的方法爲：stop() ;

  • stop() 方法用於中止動畫或效果。

  • stop() 寫到動畫或者效果的前面， 至關於中止結束上一次的動畫。

​        總結: 每次使用動畫以前，先調用 stop() ,在調用動畫

 $(".nav>li").hover(function() {
                // stop 方法必須寫到動畫的前面
                $(this).children("ul").stop().slideToggle();
            });

1.6. 事件切換

​ jQuery中爲咱們添加了一個新事件 hover() ; 功能相似 css 中的僞類 :hover 。介紹以下

語法


hover([over,]out)     // 其中over和out爲兩個函數

  • over:鼠標移到元素上要觸發的函數（至關於mouseenter）

  • out:鼠標移出元素要觸發的函數（至關於mouseleave）

  • 若是隻寫一個函數，則鼠標通過和離開都會觸發它

hover事件和中止動畫排列案例

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠標通過
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 當前元素  this不要加引號
            //     // show() 顯示元素  hide() 隱藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠標離開
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切換 hover 就是鼠標通過和離開的複合寫法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切換 hover  若是隻寫一個函數，那麼鼠標通過和鼠標離開都會觸發這個函數
            $(".nav>li").hover(function() {
                // stop 方法必須寫到動畫的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

1.7. 案例：王者榮耀手風琴效果

思路分析: 1.鼠標通過某個小li 有兩步操做：2.當前小li 寬度變爲 224px， 同時裏面的小圖片淡出，大圖片淡入3.其他兄弟小li寬度變爲69px， 小圖片淡入， 大圖片淡出

​ 

<script type="text/javascript">
      $(function () {
        // 鼠標通過某個小li 有兩步操做:

        $(".king li").mouseenter(function () {
          // 1.當前小li 寬度變爲 224px， 同時裏面的小圖片淡出，大圖片淡入
          $(this)
            .stop()
            .animate({
              width: 224,
            })
            .find(".small")
            .stop()
            .fadeOut()
            .siblings(".big")
            .stop()
            .fadeIn();
          // 2.其他兄弟小li寬度變爲69px， 小圖片淡入， 大圖片淡出
          $(this)
            .siblings()
            .stop()
            .animate({
              width: 69,
            })
            .find(".small")
            .stop()
            .fadeIn()
            .siblings(".big")
            .stop()
            .fadeOut();
        });
      });
    </script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程