JQuery中hide()和show()的使用案例

發(fā)布時間：2020-11-10 11:08:39 來源：億速云閱讀：168 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)JQuery中hide()和show()的使用案例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

案例要求：

點擊”隱藏動畫“按鈕，四個頭像從后向前，每個以0.8秒的速度消失

點擊”顯示動畫“按鈕，四個頭像從前向后，每個以0.8秒的速度出現(xiàn)

知識點：

遞歸思想：arguments.callee

回調(diào)函數(shù)：上節(jié)有敘述

實現(xiàn)思路（以點擊”隱藏動畫“為例）：

①獲取所有的img，選中最后一個img

$("p>img").last("img")

②讓最后一個img隱藏，并設(shè)置回調(diào)函數(shù)

$("p>img").last("img").hide(800,function(){ }

③回調(diào)函數(shù)中，讓當前函數(shù)的上一個img隱藏，并設(shè)置遞歸參數(shù)

$(this).prev().hide(800,arguments.callee);

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img{
            width: 90px;
            height: 90px;
            float: left;
            /* vertical-align: top; */
        }
        div{
            width: 400px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            $("#hide").click(function(){
                $("div>img").last("img").hide(800,function(){
                    //回調(diào)函數(shù),  arguments.callee相當于遞歸
                    $(this).prev().hide(800,arguments.callee);
                })
            });
            
            $("#show").click(function(){
                $("div>img").first("img").show(800,function(){
                    //回調(diào)函數(shù)
                    $(this).next().show(800,arguments.callee);
                })
            });
        });
    </script>
</head>
<body>
    <input type="button" id="hide" value="隱藏動畫" />
    <input type="button" id="show" value="顯示動畫" />
    <div >
        <img src="images/1.jpg" >
        <img src="images/2.jpg" >
        <img src="images/3.jpg" >
        <img src="images/4.jpg" >
    </div>
</body>
</html>

感謝各位的閱讀！關(guān)于JQuery中hide()和show()的使用案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

JQuery中hide()和show()的使用案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽