Animation(exp 8)

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });

        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#img1").animate({ left: '100px' }, "slow");
            });
        });

        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#img2").animate({ right: '100px' }, "slow");
            });
        });

        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideToggle("slow");
            });
        });
       
        $(document).ready(function(){
            $("#btn2").click(function(){
              $("#div1").fadeToggle();
              $("#div2").fadeToggle("slow");
              $("#div3").fadeToggle(3000);
            });
          });
    </script>
    <style>
        #flip,
        #panel {
            padding: 5px;
            text-align: center;
            color: white;
            background-color: black;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
            display: none;
        }
        body {
            padding-bottom: 15px;
        }
    </style>
</head>

<body class="container-fluid">
    <p>I will disappear when I click 1</p>
    <p>I will disappear when I click 2</p>
    <p>I will disappear when I click 3</p>
    <button id="btn1" style="margin-left: 700px; margin-bottom: 10px; margin-top: 10px;">Start Animation</button>

    <div align="center" class="container">

        <img id="img1" style="position: absolute;" src="javascript-logo.png" width="500px" alt="">
        <img id="img2" style="position: absolute; display: flex;" src="CSS-Logo.png" width="500px" alt="">
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <div align="bottom" style="position: static;" class="container">

        <div id="flip">Click to Slide toggle content </div>
        <div id="panel">This is the sliding of the Content.<br>Lorem ipsum dolor sit amet consectetur,
            adipisicing elit. Numquam nobis praesentium aliquam consequuntur corrupti ut eos molestias? Molestiae,
            reprehenderit nam totam voluptatem natus rem pariatur, quos ullam accusantium consequatur sed obcaecati est,
            nobis officia tempora praesentium minima vel quaerat neque beatae amet possimus numquam alias? Atque eius
            culpa nam, quod dolorem voluptatum fugit fuga, vero ea voluptas quia nesciunt distinctio suscipit facere
            tempora. Qui nesciunt, corrupti voluptatem iste quos ducimus!
        </div>
    </div>
    <br><br>
    <button id="btn2" style="margin-left: 700px; margin-bottom: 10px;">Fade Toggle</button>
    <div align="center">

        <div id="div1" style="width: 100px; height: 100px; background-color: red;"></div>
        <div id="div2" style="width: 100px; height: 100px; background-color: green;"></div>
        <div id="div3" style="width: 100px; height: 100px; background-color: blue;"></div>
    </div>

</body>

</html>

Post a Comment

0 Comments