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>