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?
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: