HTML5-and-CSS/sliding.html at master · ashutoshdhondkar/HTML5-and-CSS · 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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sliding functions</title>
        <script src="JQuery/jquery-1.11.3.js"></script>
        <script>
            // start writing your jquery here
            $(document).ready(function(){
                $(".btn1").click(function(){
                    $("img").slideUp('slow');
                });
                $(".btn2").click(function(){
                    $("img").slideDown('fast');
                });
                $('.btn3').click(function(){
                    $('img').stop().delay('slow').slideToggle();
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="side up" class="btn1">
        <input type="button" value="side down" class="btn2">
        <input type="button" value="side Toggle" class="btn3">
        <input type="button" value="stop" class="stop">
        <br><br>
        <img src="images/cat.jpg">
    </body>

</html>