Java-Script/callBack_Chaining.html at main · 26312/Java-Script · GitHub

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
<html>
    <head><h6><i><b> Call Back & Chaining</b></i></h6>
        <title> Call Back & Chaining</title>
        <link rel="stylesheet" href="CSS/pratice.css">
    </head>
    <body>
        <br>
        <button id="btn1">Button 1</button>
        <button id="btn2">Button 2</button>
        <button id="btn3">Button 3</button>
        <br><br>
        <div id="div1">
            <p>This is the first line of the paragraph</p>
            <p>This is the second line of the paragraph</p>
        </div><br>
        <div id="div2">
            <p>This is the third line of the paragraph</p>
            <p>This is the fourth line of the paragraph</p>
        </div><br>
        <div id="div3">
            <p>This is the fifth line of the paragraph</p>
            <p>This is the sixth line of the paragraph</p>
        </div>
    </body>
    <script type="text/javascript" src="JS/jquery.js"></script>
    <script>

        $(document).ready(function (){

            $("#btn1").click(function (){

                $("#div1").toggle(3000, function(){//Call Back

                    alert("effect done");//Call Back
                })
            });

            function printMsg(){ // Call Back function created for #div2
                                // The content in div2 will first operate as per the 'slideToggle'
                                // method and then the function 'printMsg' will be called which in turn prints
                                // the alert message

                alert("Call back done on div2");
            }

            $("#btn2").click(function (){

                $("#div2").slideToggle(2000,printMsg);//Call Back
            });

            $("#btn3").click(function (){

                $("#div3").slideUp(3000).slideDown(3000).fadeOut(1000).fadeIn(1000); // Chaining
            });

        });
    </script>
</html>