腳本之家服務器常用軟件

快捷導航

jQuery框架實現(xiàn)元素顯示及隱藏三種動畫方式

更新時間：2021年06月11日 08:45:14 作者：華為云開發(fā)者社區(qū)

在jQuery框架中對元素對象進行顯示和隱藏有三種方式，分別是“默認方式顯示和隱藏”、“滑動方式顯示和隱藏”、“淡入淡出顯示和隱藏”，今天就每種方式通過實例代碼給大家詳細講解，需要的朋友參考下吧

一、默認方式顯示和隱藏

在默認方法下顯示元素的方法是

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

其中的參數(shù)含義為：

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

同時在這里提醒一點就是，以上的三個參數(shù)是可有可無的，如果不對其進行設(shè)置，那么將以默認值執(zhí)行。

如下實例代碼：

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

在默認方式下實現(xiàn)元素隱藏的方法是

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

其中的參數(shù)含義和show方法中的一樣。同樣也是三個參數(shù)是可有可無的，如果不對其進行設(shè)置，那么將以默認值執(zhí)行。在這里我們增加一個最后的執(zhí)行函數(shù)，讓其彈出一個窗口“隱藏了...”。

如下實例代碼：

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

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

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

當調(diào)用該方法的時候，元素就會被隱藏掉，類似于hide()方法，當再次調(diào)用時，元素又會被顯示出來，類似于show()方法。其中的參數(shù)含義和上面一樣

實例代碼如下：

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

默認方式下實現(xiàn)效果如圖：

二、滑動方式顯示和隱藏

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

滑動方式下顯示

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

實例代碼：

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

滑動方式下隱藏

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

實例代碼：

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

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

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

實例代碼：

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

滑動方式下實現(xiàn)效果如圖：

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

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

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

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

實現(xiàn)代碼：

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

淡入淡出方式下實現(xiàn)隱藏

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

實現(xiàn)代碼：

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

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

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

實現(xiàn)代碼：

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

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

以上就是利用jQuery框架對元素進行顯示和隱藏的方法，下面是上面實例的完整實現(xiàn)代碼：

<!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>

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

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

我們要實現(xiàn)的是，在一個簡單的網(wǎng)頁中，頁面打開三秒后將廣告圖顯示出來，顯示五秒后再將廣告隱藏，這里對廣告圖片顯示和隱藏的操作，根據(jù)上面的講解，現(xiàn)在實現(xiàn)圖片的顯示和隱藏應該是很容易的了，那么到底應該如何實現(xiàn)延時顯示和隱藏呢？

這里就要用到j(luò)s中的一個定時器setTimeout(方法,時間);

該方法的第一個參數(shù)是一個方法名，如顯示或隱藏圖片的方法，第二個參數(shù)是毫秒數(shù)，表示頁面加載完成后多少秒執(zhí)行該方法。

那么根據(jù)思路，我們就可以在jQuery的入口函數(shù)中寫入，頁面加載完成3000毫秒，也就是三秒后調(diào)用顯示圖片的方法；頁面加載完成8000毫秒，也就是八秒后調(diào)用隱藏圖片的方法，中間空余的五秒為顯示圖片的時間。

下面我們來講上述需求實現(xiàn)，完整代碼如下：

<!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、在頁面加載完成之后調(diào)用定時器setTimeout()方法
        // 2、在定時器中調(diào)用顯示廣告和隱藏廣告的函數(shù)
        // 3、使用show和hide方法實現(xiàn)圖片的顯示和隱藏

        // 設(shè)置入口函數(shù)
        $(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>

效果如下：