Anzeige

JQuery: Seltsames Animationsverhalten


tklustig

Erfahrenes Mitglied
#1
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:

Sempervivum

Erfahrenes Mitglied
#2
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>
 

tklustig

Erfahrenes Mitglied
#3
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.
 

tklustig

Erfahrenes Mitglied
#5
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:

Sempervivum

Erfahrenes Mitglied
#6
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"?
 

Sempervivum

Erfahrenes Mitglied
#7
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:
 

tklustig

Erfahrenes Mitglied
#8
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?
 

Sempervivum

Erfahrenes Mitglied
#9
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);
                    });
                }
 

tklustig

Erfahrenes Mitglied
#10
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?
 

Sempervivum

Erfahrenes Mitglied
#11
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.
 

tklustig

Erfahrenes Mitglied
#12
Diese Version Deines Codes nutze ich
Javascript:
.
.
   animation(parameter == 1? 0 : 1);.
   .
Den Fehler wirft Firefox-Developer Edition- aus
 

Sempervivum

Erfahrenes Mitglied
#13
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.
 

tklustig

Erfahrenes Mitglied
#14
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
.
.
 

Sempervivum

Erfahrenes Mitglied
#15
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.
 

tklustig

Erfahrenes Mitglied
#16
Ä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!
 

tklustig

Erfahrenes Mitglied
#18
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...
 
Anzeige

Neue Beiträge

Anzeige