教你三種jQuery框架實現元素顯示及隱藏動畫方式

solution發表於2021-09-11
jQuery框架動畫

摘要：在jQuery框架中對元素物件進行顯示和隱藏有三種方式，分別是“預設方式顯示和隱藏”、“滑動方式顯示和隱藏”、“淡入淡出顯示和隱藏”。

本文分享自華為雲社群《jQuery框架實現元素顯示及隱藏動畫【附案例分析】》，原文作者：灰小猿。

首先來看一個簡單的動畫效果圖：

https://i.iter01.com/images/26cca2d3337f2351e32d53e9329c07361de9ead5a43fab213ece94a30970452e.gif​

 

 

 

 

 

 

 

 

 

 

 

我之前也和小夥伴們講過使用jQuery框架可以很好的對html中元素的屬性等進行操作，所以上面顯示和隱藏的也只是一個div，而並不是一個圖片。下面我就來和小夥伴們講一個如何對元素的屬性進行操作，使其顯示或者隱藏！

在jQuery框架中對元素物件進行顯示和隱藏有三種方式，分別是“預設方式顯示和隱藏”、“滑動方式顯示和隱藏”、“淡入淡出顯示和隱藏”。接下來我們就分別對這三種方法進行介紹。

一、預設方式顯示和隱藏

在預設方法下顯示元素的方法是

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

其中的引數含義為：

  • speed：動畫的速度。三個預定義的值("slow","normal", "fast")或表示動畫時長的毫秒數值(如：1000)
  • easing：用來指定切換效果，預設是"swing"，可用引數"linear"。* swing：動畫執行時效果是 先慢，中間快，最後又慢。* linear：動畫執行時速度是勻速的
  • fn：在動畫完成時執行的函式，每個元素執行一次。

同時在這裡提醒一點就是，以上的三個引數是可有可無的，如果不對其進行設定，那麼將以預設值執行。

如下例項程式碼：

 // 顯示div
 $("#showDiv").show("slow","swing");
 linear 勻速

 在預設方式下實現元素隱藏的方法是

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

其中的引數含義和show方法中的一樣。同樣也是三個引數是可有可無的，如果不對其進行設定，那麼將以預設值執行。在這裡我們增加一個最後的執行函式，讓其彈出一個視窗“隱藏了...”。

如下例項程式碼：

// 隱藏div
$("#showDiv").hide("slow","swing",function () {
    alert("隱藏了...")
});

 那麼難道我們每次都要定義一個方法用於元素顯示，再定義一個方法用於元素隱藏嗎？並不是的，jQuery中也充分的考慮到了這一點，所以在有一個既能實現顯示又能實現隱藏的方法

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

當呼叫該方法的時候，元素就會被隱藏掉，類似於hide()方法，當再次呼叫時，元素又會被顯示出來，類似於show()方法。其中的引數含義和上面一樣

例項程式碼如下：

// 能顯示能隱藏
 $("#showDiv").toggle("slow","linear");

 預設方式下實現效果如圖：

https://i.iter01.com/images/a6f19e544b0f1507b2f39afcf71924aa5c35089b8cebea9c7cb957d0b67a03cc.gif​

 

 

 

 

 

 

 

 

二、滑動方式顯示和隱藏

從名字上我們應該也能區分出，滑動方式和預設方式的不同之處其實就是顯示和隱藏時的動畫不一樣罷了，下面我們就來介紹一下在滑動方式下進行元素的顯示、隱藏、既顯示又隱藏，

滑動方式下顯示

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

例項程式碼：

// 滑動顯示div
$("#showDiv").slideDown("slow");

 滑動方式下隱藏

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

例項程式碼：

// 滑動隱藏div
$("#showDiv").slideUp("fetch");

 滑動方式下既顯示又隱藏：

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

例項程式碼：

// 滑動能顯示能隱藏
$("#showDiv").slideToggle("slow");

 滑動方式下實現效果如圖：

https://i.iter01.com/images/c60218309fb1fabdec9835b099b254a0951e4d97f722521f742b18e9d47d0b04.gif​

 

 

 

 

 

三、淡入淡出方式顯示和隱藏

淡入淡出方式下進行元素的顯示和隱藏其實和上面兩種方法一樣的，不同的也只是顯示的效果不一樣罷了，

淡入淡出方式下顯示使用的方法是：

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

實現程式碼：

// 淡出顯示div
$("#showDiv").fadeIn("slow")

 淡入淡出方式下實現隱藏

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

實現程式碼：

// 淡出隱藏div
$("#showDiv").fadeOut("fetch");

 淡入淡出方式下既顯示又隱藏

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

實現程式碼：

// 淡入淡出顯示和隱藏div
$("#showDiv").fadeToggle("fetch")

 淡入淡出方式下執行的效果如下：

https://i.iter01.com/images/53d572818199a467913ffc2f45d32ef65722531892e86e226d8d2d5ccfed4ac3.gif​

 

 

 

 

 

 

 

 

 

以上就是利用jQuery框架對元素進行顯示和隱藏的方法，下面是上面例項的完整實現程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>預設方式顯示和隱藏動畫</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
    <script>
        function hideFn() {
            // 隱藏div
            /*$("#showDiv").hide("slow","swing",function () {
                alert("隱藏了...")
            });*/

            // 滑動隱藏div
            $("#showDiv").slideUp("fetch");

            // 淡出隱藏div
            // $("#showDiv").fadeOut("fetch");

        }
        
        function showFn() {
            // 顯示div
            // $("#showDiv").show("slow","swing");
            // linear 勻速

            // 滑動顯示div
            // $("#showDiv").slideDown("slow");

            // 淡出顯示div
            $("#showDiv").fadeIn("slow")
        }
        
        function toggleFn() {
            // 能顯示能隱藏
            // $("#showDiv").toggle("slow","linear");

            // 滑動能顯示能隱藏
            // $("#showDiv").slideToggle("slow");

            // 淡入淡出顯示和隱藏div
            $("#showDiv").fadeToggle("fetch")
        }
        
    </script>
    
</head>
<body>
<input type="button" value="點選按鈕隱藏div" onclick="hideFn()">
<input type="button" value="點選按鈕顯示div" onclick="showFn()">
<input type="button" value="點選按鈕切換div顯示和隱藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div顯示和隱藏
</div>
</body>
</html>

四、案例：廣告的自動顯示和隱藏

既然現在我們已經知道了jQuery框架下是如何進行元素的顯示和隱藏的，那麼就應該將其應用到實際的案例中去，下面通過實現廣告的自動顯示和隱藏的案例，來對該技術進一步加強實踐。

我們要實現的是，在一個簡單的網頁中，頁面開啟三秒後將廣告圖顯示出來，顯示五秒後再將廣告隱藏，這裡對廣告圖片顯示和隱藏的操作，根據上面的講解，現在實現圖片的顯示和隱藏應該是很容易的了，那麼到底應該如何實現延時顯示和隱藏呢？

這裡就要用到js中的一個定時器setTimeout(方法,時間);

該方法的第一個引數是一個方法名，如顯示或隱藏圖片的方法，第二個引數是毫秒數，表示頁面載入完成後多少秒執行該方法。

那麼根據思路，我們就可以在jQuery的入口函式中寫入，頁面載入完成3000毫秒，也就是三秒後呼叫顯示圖片的方法；頁面載入完成8000毫秒，也就是八秒後呼叫隱藏圖片的方法，中間空餘的五秒為顯示圖片的時間。

下面我們來講上述需求實現，完整程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>廣告的自動顯示與隱藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        // 圖片延時顯示和隱藏的步驟
        // 1、在頁面載入完成之後呼叫定時器setTimeout()方法
        // 2、在定時器中呼叫顯示廣告和隱藏廣告的函式
        // 3、使用show和hide方法實現圖片的顯示和隱藏

        // 設定入口函式
        $(function () {
            // 延時3秒後顯示圖片
            setTimeout(adShow,3000);
            // 延時6秒後隱藏圖片
            setTimeout(adHide,8000);
        });
        // 顯示圖片
        function adShow() {
            $("#ad").show("slow");
        }

        // 隱藏圖片
        function adHide() {
            $("#ad").hide("fast");
        }

    </script>
</head>
<body>
<!-- 整體的DIV -->
<div>
    <!-- 廣告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

效果如下：

https://i.iter01.com/images/f058685e791cf9f9dad28af88e59b75bd6c1ade2ef58e327dd4754985d17af9e.gif

 

 

 

 

 

 

 

 

 

點選關注，第一時間瞭解華為雲新鮮技術~

相關文章