Heim > Artikel > Web-Frontend > JQuery-Animation hide() und show() Verwendungserklärung 2 (Codebeispiel)

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

不言nach vorne: 2019-01-18 10:48:462424Durchsuche

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>

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JQuery-Animation hide() und show() Verwendungserklärung 1 (Codebeispiel)Nächster Artikel：JQuery-Animation hide() und show() Verwendungserklärung 1 (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen