<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
    • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
    1. 長城號首頁
    2. 投稿

    jq點擊隱藏再點擊顯示切換（js控制div顯示隱藏實現）

    長城號SEO專員 ? ? 投稿

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

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

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

    我之前也和小伙伴們講過使用 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");

    ?默認方式下實現效果如圖：

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

    二、滑動方式顯示和隱藏

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

    滑動方式下顯示

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

    實例代碼：

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

    滑動方式下隱藏

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

    實例代碼：

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

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

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

    實例代碼：

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

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

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

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

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

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

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

    實現代碼：

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

    淡入淡出方式下實現隱藏

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

    實現代碼：

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

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

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

    實現代碼：

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

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

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

    以上就是利用 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>

    效果如下：

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

    點擊關注，第一時間了解華為云新鮮技術~

    贊 (0)

    相關推薦

    版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费