Sie sind hier : basti1012.de/ Kurze-Scripte-und-Codeschnipsel / index.php

Zurück


Der Quellcode dazu


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>