快捷導(dǎo)航

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

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

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

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

在jQuery框架中對元素對象進(jìn)行顯示和隱藏有三種方式，分別是“默認(rèn)方式顯示和隱藏”、“滑動方式顯示和隱藏”、“淡入淡出顯示和隱藏”。接下來我們就分別對這三種方法進(jìn)行介紹。

一、默認(rèn)方式顯示和隱藏

在默認(rèn)方法下顯示元素的方法是

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

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

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

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

如下實(shí)例代碼：

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

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

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

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

如下實(shí)例代碼：

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

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

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

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

實(shí)例代碼如下：

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

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

二、滑動方式顯示和隱藏

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

滑動方式下顯示

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

實(shí)例代碼：

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

滑動方式下隱藏

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

實(shí)例代碼：

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

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

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

實(shí)例代碼：

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

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

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

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

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

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

實(shí)現(xiàn)代碼：

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

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

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

實(shí)現(xiàn)代碼：

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

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

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

實(shí)現(xiàn)代碼：

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

淡入淡出方式下運(yùn)行的效果如下：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>默認(rèn)方式顯示和隱藏動畫</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="點(diǎn)擊按鈕隱藏div" onclick="hideFn()">
<input type="button" value="點(diǎn)擊按鈕顯示div" onclick="showFn()">
<input type="button" value="點(diǎn)擊按鈕切換div顯示和隱藏" onclick="toggleFn()">

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

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

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

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

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

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

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

下面我們來講上述需求實(shí)現(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>
        // 圖片延時(shí)顯示和隱藏的步驟
        // 1、在頁面加載完成之后調(diào)用定時(shí)器setTimeout()方法
        // 2、在定時(shí)器中調(diào)用顯示廣告和隱藏廣告的函數(shù)
        // 3、使用show和hide方法實(shí)現(xiàn)圖片的顯示和隱藏

        // 設(shè)置入口函數(shù)
        $(function () {
            // 延時(shí)3秒后顯示圖片
            setTimeout(adShow,3000);
            // 延時(shí)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>

效果如下：