Java-Script/effects2.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
<htm>
        <head> Animating Effects Jquery
            <title>Jquery</title>
            <link rel="stylesheet" href="CSS/effects2.css">
        </head>
        <body>
            <br><br>
            <button id="btn1">Animate</button>
            <button id="btn2">Animate Back</button>
            <br><br>
            <div id="div" class="mydiv">CUBE</div>

        </body>
        <script type="text/javascript" src="JS/jquery.js"></script>
        <script>

            $(document).ready(function(){

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

                    $("#div").animate({

                        width: '200px',
                        height: '200px',
                        opacity: '1',
                        left : '200px'

                    },1000)
                });

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

                   $("#div").animate({

                        width: '100px',
                        height: '100px',
                        opacity: '0.4',
                        left : '0px'

                    },1000)


                });


            });
        </script>
    </html>