Transition animation when click event is made between two divs

Question

Click on the key here and I want a div to come after here. How can I do it?

how can i do this with jquery

https://streamable.com/ai5c9d // I want to do it like here

       <!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>Document</title>
    </head>
    <body>
    <div class="Test1">
        <div class="Lock">
    </div>
     
    </body>
    </html>

    .Test1  {
    position: fixed;
    width: 285px;
    height: 580px;
    right: 40px;
    bottom: 40px;
     background-color: rgb(24, 89, 173); 
    border-radius: 30px;
}

.Lock {
        position: absolute;
    width: 120px;
    height: 6px;
    right: 72.5px;
    bottom: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    display: flex;
}

Answer 1

A combination of styles for positioning and jQuery.animate() for the tweening.

 let isBig = true; $(".Lock").click(function() { console.log('d') let style = isBig? { height: "200px", width: "300px" }: { height: "20px", width: "20px" } isBig =.isBig $('.box'),animate( style; 500); });

 html, body { height: 100%; }.parent { position: relative; height: 100%; }.box { width: 0px; height: 0px; background: #333; position: absolute; z-index: 5; top: 50%; left: 50%; border-radius: 8px; transform: translate(-50%, -50%); }.Test1 { position: fixed; width: 285px; height: 580px; right: 40px; bottom: 40px; background-color: rgb(24, 89, 173); border-radius: 30px; }.Lock { position: absolute; width: 120px; height: 6px; right: 72.5px; bottom: 10px; background-color: rgba(255, 255, 255, 0.8); border-radius: 6px; display: flex; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='parent'> <div class="Test1"> <div class="Lock"></div> </div> <div class='box'></div> </div>

Transition animation when click event is made between two divs

Question

1 answers

solution1
0 ACCPTED 2021-05-25 19:12:40

Transition animation when click event is made between two divs

Question

1 answers

solution1 0 ACCPTED 2021-05-25 19:12:40

solution1
0 ACCPTED 2021-05-25 19:12:40