JQueryアニメーションのhide()とshow()の使い方解説2（コード例）-jsチュートリアル-php.cn

JQueryアニメーションのhide()とshow()の使い方解説2（コード例）

不言

リリース： 2019-01-18 10:48:46

転載

2484 人が閲覧しました

この記事の内容は、JQuery アニメーションでの Hide() と show() の使い方の 2 番目の説明です (コード例)。必要な方は参考にしていただければ幸いです。あなたのお役に立てますように。

この記事は、hide() と show() の補足であり、コールバック関数だけでなく、再帰関連の知識ポイントも紹介します。

ケース要件:

「アニメーションを非表示」ボタンをクリックすると、4 つのアバターが後ろから前に消え、それぞれ 0.8 秒の速度で消えます。

「アニメーションを表示」ボタンをクリックすると、4 つのアバターが前から後ろに 0.8 秒の速度で表示されます。

知識ポイント:

再帰的思考: 引数。 callee

コールバック関数: 前のセクションで説明

##実装アイデア (例として「アニメーションを非表示」をクリックする):

①すべての画像を取得し、最後の画像を選択します

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

②最後の img を非表示にし、コールバック関数

$("p>img") を設定します。 last(" img").hide(800,function(){ }

③コールバック関数で、現在の関数の前の img を非表示にし、再帰パラメータ

$(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(){
                    //回调函数,  arguments.callee相当于递归
                    $(this).prev().hide(800,arguments.callee);
                })
            });
            
            $("#show").click(function(){
                $("div>img").first("img").show(800,function(){
                    //回调函数
                    $(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>

ログイン後にコピー

以上がJQueryアニメーションのhide()とshow()の使い方解説2（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。