JQuery: Seltsames Animationsverhalten

Tritt diese Fehlermeldung in der korrigierten Version auf? Bei mir nicht, weder mit der normalen noch mit der min-Variante. Habe es in den Browsern Opera, IE, FF getestet.
 
Diese Version Deines Codes nutze ich
Javascript: 
.
.
   animation(parameter == 1? 0 : 1);.
   .
Den Fehler wirft Firefox-Developer Edition- aus
 
Mein Firefox bringt diese Meldung nicht, allerdings habe ich nicht die Developer Edition.
Oder in deiner Version ist noch irgend etwas anders als in meiner. Poste doch noch Mal die komplette Seite.
 
Hier der gesamte Code:
Javascript: 
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
        <title> jQuery </title>
        <script type="text/javascript" src="js/jquery-3.3.1.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) {
                    //entspricht einem vardump() in PHP
                    console.log("animation called", parameter);
                    $("#pic1").fadeTo(7500, parameter, animation)
                    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="img/Punk2.jpg" alt="Notavailable" id="pic1">
    </body>
</html>

und hier die Meldungen von Firefox(Developer Edition)
Apache-Konfiguration: 
animation called 0
animation called 1
.
.
.
jQuery.Deferred exception: too much recursion camelCase@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:3988:9
get@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:4069:52
queue@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:4335:12
queue/<@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:4412:17
each@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:354:10
each@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:189:10
queue@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:4411:4
animate@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:7304:4
fadeTo@http://localhost:8383/JqueryApplication/jquery/js/jquery-3.3.1.js:7282:10
animation@http://localhost:8383/JqueryApplication/jquery/Rekursion.html:28:21
animation@http://localhost:8383/JqueryApplication/jquery/Rekursion.html:29:21
.
.
 
OMG, da hast Du ja voll eine Rekursion drin:
Code: 
                function animation(parameter) {
                    //entspricht einem vardump() in PHP
                    console.log("animation called", parameter);
                    $("#pic1").fadeTo(7500, parameter, animation)
                    animation(parameter == 1 ? 0 : 1);
                }
$("#pic1").fadeTo(7500, parameter, animation)ruft animation() als Callback auf, aber ohne Parameter.
animation(parameter == 1 ? 0 : 1);ruft animation sofort auf, dadurch kommt eine Rekursion ohne Verzögerung und ohne Endekriterium zu Stande. Daher die Fehleranzeige.
So ist es richtig:
Code: 
                function animation(parameter) {
                    //entspricht einem vardump() in PHP
                    console.log("animation called", parameter);
                    $("#pic1").fadeTo(5000, parameter, function() {
                        animation(parameter == 1? 0 : 1);
                    });
                }
So wird animation() als Callback mit Parameter aufgerufen.
 
Ändert nix. Die Fehlermeldungen kommen trotzdem. Genau dieselben wie vorher. Einziger Unterschied: Ich kann sie jetzt per Copy&Paste greifen. Vorher konnte ich das kaum!
 
Okay. Jetzt klappt alles. Danke für deine Hilfe !!
P.S.: Wie markiere ich deine Lösung als Antwort bzw. den gesamten Thread als erledigt. Vor einiger Zeit gab es dazu rechts oben einen Button;
den finde ich allerdings nicht mehr...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück