JQuery-Animation hide() und show() Verwendungserklärung 2 (Codebeispiel)-js-Tutorial-php.cn

JQuery-Animation hide() und show() Verwendungserklärung 2 (Codebeispiel)

不言

Freigeben： 2019-01-18 10:48:46

nach vorne

2522 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der zweiten Erklärung der Verwendung von hide() und show() in der JQuery-Animation (Codebeispiel). Ich hoffe, dass dies der Fall ist hilfreich sein.

Dieser Artikel ist eine weitere Ergänzung zu hide() und show(), die nicht nur Rückruffunktionen, sondern auch rekursionsbezogene Wissenspunkte einführt.

Fallanforderungen:

Klicken Sie auf die Schaltfläche „Animation ausblenden“. Vier Avatare verschwinden von hinten nach vorne, jeder verschwindet mit einer Geschwindigkeit von 0,8 Sekunden

Klicken Sie auf die Schaltfläche „Animation anzeigen“, und es erscheinen von vorne nach hinten vier Avatare mit einer Geschwindigkeit von jeweils 0,8 Sekunden.

Wissenspunkte:

Rekursives Denken: Argumente .callee

Rückruffunktion: Der vorherige Abschnitt beschreibt

Implementierungsideen (nehmen Sie als Beispiel das Klicken auf „Animation ausblenden“):

①Alle Bilder abrufen, letztes Bild auswählen

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

②Das letzte Bild ausblenden und die Rückruffunktion festlegen

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

③Verstecken Sie in der Rückruffunktion das vorherige img der aktuellen Funktion und legen Sie den rekursiven Parameter

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

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJQuery-Animation hide() und show() Verwendungserklärung 2 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!