У меня есть кнопка, которая, когда я нажимаю на нее, создает анимацию для перемещения изображения вверх.

Каждый раз, когда я нажимаю кнопку, она должна добавлять другое изображение, которое перемещается вверх.

Проблема в том, что если я нажал кнопку более одного раза, первое завершится, но все остальные изображения просто исчезнут, не дойдя до точки.

< sizescss

.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>

Анимация взята из этого руководства.

Нажав кнопку более 1 раза, должно отображаться более 1 поднимающегося изображения.


Проблема:

Когда я нажимаю много раз в течение 2 секунд, изображения отображаются, но по прошествии 2 секунд после первого щелчка все изображения исчезают.

0
DerekPK 7 Окт 2021 в 06:51

2 ответа

Лучший ответ

Проблема в том, что по истечении времени ожидания все изображения .zoom удаляются.

Этот фрагмент "запоминает", какой img нужно удалять при каждом тайм-ауте.

В практической ситуации важно, чтобы эти изображения удалялись, когда они больше не нужны, иначе в конечном итоге вы можете исчерпать их запасы.

<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>
2
A Haworth 7 Окт 2021 в 05:27
$("button").on("click", function() {
       
           $(this).closest(".item-info")
               .find("img")
               .clone()
               .addClass("zoom")
               .appendTo("body");
           if(!$('.zoom').get(0) )
           setTimeout(function(){
               $(".zoom").remove();
           }, 2000);
       });

Попробуйте так и скажите, все ли в порядке :)

1
Todor Markov 7 Окт 2021 в 04:56