css animation disappeared when the first one was finished-CodePudding

I have a button that when I click it, it makes an animation for an image to move up.

Every-time I click the button, it should add another image that moves up.

The problem is: If I have tapped the button more than one time, the first one completes, but all the other images just disappears before reaching the point.

css

.zoom{
    position: fixed;
    top: 50%;
    right: 1%;
    width: 5%;
    height: 5%;
    opacity: 0;
    animation: zoom 2s ease forwards;
    z-index: 2;

}

@keyframes zoom{
    0%{opacity: 0}
    50%{opacity: 1}
    100%{opacity: 0; top: 1%;}
}

html

<head>
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>

<body>
          <div class="col-lg-4 item-info">

             <div class="card" style="background-color: #05008F">
                <img class="thumbnail" src="image.png" width="640" height="360">
             </div>

             <div class="box-element">
                <button>Image Up</button>
             </div>

          </div>

    <script type="text/javascript">
       $("button").on("click", function() {
           $(this).closest(".item-info")
               .find("img")
               .clone()
               .addClass("zoom")
               .appendTo("body");
           setTimeout(function(){
               $(".zoom").remove();
           }, 2000);
       });
    </script>
</body>

The animation comes from this tutorial

clicking the button more than 1 time, should show more than 1 image going up.

The problem is:

When I click many times during the 2 seconds, the images are displayed, but when the 2 seconds are gone from the first click, all of the images disappear.

CodePudding user response：

The problem is that on the timeout all the .zoom images are removed.

This snippet 'remembers' which img is to be removed on each timeout.

It is important in a practical situation that these images are removed when no longer needed else you could eventually run out of store.

<head>
  <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
  <style>
    .zoom {
      position: fixed;
      top: 50%;
      right: 1%;
      width: 5%;
      height: 5%;
      opacity: 0;
      animation: zoom 2s ease forwards;
      z-index: 2;
    }
    
    @keyframes zoom {
      0% {
        opacity: 0
      }
      50% {
        opacity: 1
      }
      100% {
        opacity: 0;
        top: 1%;
      }
    }
  </style>
</head>

<body>
  <div class="col-lg-4 item-info">

    <div class="card" style="background-color: #05008F">
      <img class="thumbnail" src="https://picsum.photos/id/1084/640/360?grayscale" width="640" height="360">
    </div>

    <div class="box-element">
      <button>Image Up</button>
    </div>

  </div>

  <script type="text/javascript">
    $("button").on("click", function() {
      const thisImg = $(this).closest(".item-info")
        .find("img")
        .clone();
      thisImg.addClass("zoom")
        .appendTo("body");
      setTimeout(function() {
        thisImg.remove();
      }, 2000);
    });
  </script>
</body>

CodePudding user response：

$("button").on("click", function() {
       
           $(this).closest(".item-info")
               .find("img")
               .clone()
               .addClass("zoom")
               .appendTo("body");
           if(!$('.zoom').get(0) )
           setTimeout(function(){
               $(".zoom").remove();
           }, 2000);
       });

Try it this way and tell if everythins is ok :)