javascript 使用css在html中逐个显示悬停动画

pgvzfuti 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(171)

我有四个div，我试图悬停一个接一个连续，我的代码如下：

#rij1 .content-overlayz,
#rij1 .content-details {
  animation-duration: 2s;
  animation-name: stepped-pulse;
  animation-iteration-count: infinite;
  /* animation-direction: alternate; */
  animation-timing-function: steps(4, end);
}

@keyframes stepped-pulse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

<a href="<?php echo base_url()?>homecontroller/types/<?=$subz->id?>">
      <div class="ProductBlock" id="rij<?=$i?>">
        <div class="contentme">
        <div class="content-overlayz"></div>
          <div class="img-fill">
            <img src="<?php echo base_url()?>admin/uploads/types/<?=$subz->pimage?>">
          </div>
          <div class="content-details" style="z-index:99">
          <h3><?=$subz->name?></h3>
      </div>
        </div>
      </div> </a>

我用了下面的css来制作第一部分的动画：

#rij1 .content-overlayz,
#rij1 .content-details {
  animation-duration: 2s;
  animation-name: stepped-pulse;
  animation-iteration-count: infinite;
  /* animation-direction: alternate; */
  animation-timing-function: steps(4, end);
}

@keyframes stepped-pulse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

我如何使其余的元素动画像这样一个接一个，这是第一节将动画然后停止然后下一节将动画和停止和下一步，请帮助，提前感谢

JavaScript

来源：https://stackoverflow.com/questions/75744230/hover-animation-one-by-one-in-html-using-css

1条答案

按热度按时间

62lalag41#

首先我看到了你代码中的错误。

**错误：**您正在向代码中动态生成的id添加样式，以后可能无法向所有项添加样式
修复将样式添加到ProductBlock类或新类（如果您在其他地方使用它）。

.animateThis .content-overlayz,
.animateThis .content-details {
  animation-duration: 2s;
  animation-name: stepped-pulse;
  animation-iteration-count: infinite;
  /* animation-direction: alternate; */
  animation-timing-function: steps(4, end);
}

JavaScript语言

<script>
$(document).ready(function () {
    function playAnimation() {
        let currentIndex = 0;
        $(".ProductBlock").each(function (index) {
            let element = $(this);
            setTimeout(function () {
                $(".ProductBlock").removeClass("animateThis");
                element.addClass("animateThis");
                currentIndex++;
                if(currentIndex === $(".ProductBlock").length) {
                    currentIndex = 0;
                    playAnimation();
                }
            }, index * 2000);
        });
    }
    playAnimation();
});
</script>

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 使用css在html中逐个显示悬停动画

1条答案

JavaScript语言

相关问题

热门标签

最新问答