Kurze Scripte und Codeschnipsel ,Rekursion

Rekursion.php

Quell Code

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
        <title> jQuery </title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
            .CSSKlasse{
                color:red;
                font-size: 42px;
            }
            .b1{
                float:left;
            }
            #ptag{
                color:green;
                font-size: 22px;
            }
            #pic1 {
                opacity: 0;
            }
        </style>
        <script>
            $(document).ready(function () {
                function animation(parameter) {
                    console.log("animation called", parameter);
                    $("#pic1").fadeTo(5000, parameter, function() {
                        animation(parameter == 1? 0 : 1);
                    });
                }
                $("#pic1").css({
                    opacity: "0"
                });
                $("*").css({
                    background: "ebebeb",
                    color: "1e1e1e"
                });
                $("h1").css({
                    textAlign: "center"
                });
                $("#b1").click(function () {
                    $("#pic1").animate({opacity: "1"}, 5000);
                });
                $("#b2").click(function () {
                    $("#pic1").css({opacity: "0"});
                });
                $("#b3").click(function () {
                    $("#pic1").stop();
                });
                animation(1);
            });
        </script>
    </head>
    <body>
        <h1 class="CSSKlasse">Verwendung von Rekursion</h1>
        <p id="ptag">eine Rekursion liefert in Jquery die Basis von Animationstechniken</p>
        <button id="b1" class="b1">Einblenden</button>
        <button id="b2" class="b1">Ausblenden</button>
        <button id="b3" class="b1">Rekursiver Aufruf abbrechen</button>
        <img src="https://www.tutorials.de/data/avatars/m/274/274250.jpg?1527112278" alt="Notavailable" id="pic1">
    </body>
</html>