JQuery: Seltsames Animationsverhalten

T

tklustig

Erfahrenes Mitglied
Hallo Leute,
folgender Code soll nach Betätigen entsprechender Buttons ein Bild langsam ein-und ausblenden. Das Einblenden klappt. Wenn ich dann allerdings versuche, das Bild auszublenden, stürzt das Script ab oder das Bild wird ausgeblendet und sofort langsam eingeblendet, ohne den Button betätigt zu haben oder es wird auf einen Schlag neu eingeblendet.
However, das Script zeigt nicht das gewollte Verhalten: Langsam einblenden, auf einen Schlag ausblenden, langsam neu einblenden, je nach Button. Wie codiere ich richtig?
Javascript: 
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
        <title> jQuery </title>
        <script src="js/jquery-3.3.1.js"></script>
        <!-- Hier ggf. CSS-Link einfügen, z.B.: <link href="css/selektoren.css" rel="stylesheet"> -->
        <style>
            .CSSKlasse{
                color:red;
                font-size: 42px;
            }
            #ptag{
                color:green;
                font-size: 22px;
            }
            .b1{
                float:left;
            }

        </style>
        <script>
            $(document).ready(function () {
                function animation(parameter) {
                    $("#pic1").fadeTo(5000, parameter, animation);
                    return;
                }
                function getAnimation(x) {
                    return function () {
                        animation(x);
                    };
                }
                $("#pic1").css({
                    opacity: "0"
                });
                $("*").css({
                    background: "#ebebeb",
                    color: "1e1e1e"
                });
                $("h1").css({
                    textAlign: "center"
                });
                $("#b1").click(getAnimation(1));
                $('#b2').click(function () {
                    $('#pic1').hide();
                });

            });
        </script>
    </head>
    <body>
        <h1 class="CSSKlasse">Verwendung von Rekursion</h1>
        <p id="ptag">eine Rekursion liefert in Jquery die Basis von Animationstechniken</p>
        <img src="img/Punk2.jpg" alt="Notavailable" id="pic1">
        <button id="b1" class="b1">Einblenden</button>
        <button id="b2" class="b1">Ausblenden</button>
    </body>
</html>

        </script>
    </head>
    <body>
        <h1 class="CSSKlasse">Verwendung von Rekursion</h1>
        <p id="ptag">eine Rekursion liefert in Jquery die Basis von Animationstechniken</p>
        <img src="img/Punk2.jpg" alt="Notavailable" id="b1">
        <button id="b2" class="b2">Einblenden</button>
        <button id="b3" class="b2">Ausblenden</button>
    </body>
</html>
 
Zuletzt bearbeitet:
Da ist von Rekursion die Rede, ich kann aber bei dem, was Du tun möchtest, keine sinnvolle Anwendung dafür erkennen. Einfach die Opacity animieren oder auf 0 setzen:
HTML: 
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
        <title> jQuery </title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <style>
            .CSSKlasse{
                color:red;
                font-size: 42px;
            }
            #ptag{
                color:green;
                font-size: 22px;
            }
            #b1 {
                opacity: 0;
            }
        </style>
        <script>
            $(document).ready(function () {
                $("#b2").on("click", function() {
                    $("#b1").animate({opacity: "1"}, "slow");
                });
                $("#b3").on("click", function() {
                    $("#b1").css({opacity: "0"});
                });
            });
        </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="b2" class="b2">Einblenden</button>
        <button id="b3" class="b2">Ausblenden</button>
        <img src="images/dia0.jpg" alt="Notavailable" id="b1">
    </body>
</html>
Dies kann man auch ganz ohne jQuery mit CSS-Transition erreichen:
HTML: 
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
        <title> jQuery </title>
        <style>
            .CSSKlasse{
                color:red;
                font-size: 42px;
            }
            #ptag{
                color:green;
                font-size: 22px;
            }
            #b1 {
                opacity: 0;
            }
            #b1.visi {
                opacity: 1;
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
        <h1 class="CSSKlasse">Verwendung von Rekursion</h1>
        <p id="ptag">eine Rekursion liefert in Jquery die Basis von Animationstechniken</p>
        <button id="b2" class="b2">Ein-/Ausblenden</button>
        <img src="images/dia0.jpg" alt="Notavailable" id="b1">
        <script>
            document.getElementById("b2").addEventListener("click", function() {
                document.getElementById("b1").classList.toggle("visi");
            });
        </script>
    </body>
</html>
 
Deine Lösung funktioniert zwar. Allerdings ist ein rekursiver Aufruf mit jQuery zwingend erforderlich, was zu meinem Code führt, der allerdings so nicht funktioniert.
 
Es geht einfach nur darum, Rekursionen mit jQuery zu nutzen und vor allem wieder abzubrechen. Versuche das folgendermaßen. Warum ist ein Abbruch des rekursiven Aufrufes nach 5000 Millisekunden nicht mehr möglich. Das Script stürzt ab! Vor Ablauf der Zeit stoppt die Animation, wie erwünscht.
Javascript: 
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
        <title> jQuery </title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.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) {
                    $("#pic1").fadeTo(5000, parameter, animation)
                }
                $("#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>
 
Zuletzt bearbeitet:
Ich glaube, jetzt verstehe ich es besser: Mit Rekursion ist hier die Animation in jQuery gemeint. Und mit stop() wird diese abgebrochen. Natürlich wirkt dieser Aufruf nur, wenn auch eine Animation aktiv ist. Was heißt "Das Skript stürzt ab"?
 
Nein, doch falsch verstanden: Wie ich sehe, hast Du da eine Rekursion mit der Funktion animation() versucht zu programmieren. Eine solche Rekursion ist nur sinnvoll, wenn man etwas wiederholen will, z. B. wiederholt ein- und ausblenden:
 
Mit Abstürzen meine ich, dass nach Ablauf der Zeit keinerlei Buttons mehr betätigt werden können. Die ganze Website ist inaktiv. Selbst ein manueller Reload über den Browser funktioniert nicht mehr...
Warum?
 
Die Antwort bekommt man, wenn man eine Diagnoseausgabe in die Funktion animation() einbaut:
Code: 
                function animation(parameter) {
                    console.log("animation called", parameter);
                    $("#pic1").fadeTo(5000, parameter, animation)
                }
Wird die Funktion als Callback aufgerufen, hier:
Code: 
$("#pic1").fadeTo(5000, parameter, animation)
wird kein Parameter übergeben, er ist daher undefiniert und offenbar führt das dazu, dass die Callback-Funktion animation() sofort aufgerufen wird, wodurch man in ein Endlosschleife gerät.
Korrektur, indem Du auch beim Aufruf als Callback den Parameter übergibst:
Javascript: 
                function animation(parameter) {
                    console.log("animation called", parameter);
                    $("#pic1").fadeTo(5000, parameter, function() {
                        animation(parameter == 1? 0 : 1);
                    });
                }
 
Prinzipell löst auch diese Antwort das Problem, allerdings wirft der Browser folgende Fehlermeldung aus:
jQuery.Deferred exception: too much recursion camelCase@https://code.jquery.com/jquery-3.2.1.min.js:2:2616
Wie kommt den diese Fehlermeldung zu stande??
Ich integriere jquery nicht online ,sondern lokal. Auserdem nutze ich die volle, nicht die abgespeckte min-Variante. Last but not Least: Who the hell is camelCase?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück