Question

当页面加载时，所有框都会被初始化（滚动时它们会滑入）。不幸的是，当我将其中一个盒子（在它们出现后）悬停时，再次初始化，以便它们再次滑入。为了忽略徘徊，我该怎么办？（我想保留：hoverShadow！）

代码：

＆＃13;

var allBoxes = $('.hoverShadow');

allBoxes.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible");
  }
});

currentWindow.scroll(function(event) {
  allBoxes.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in");
    }
  });
});

＆＃13;

.hoverShadow {
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: auto;
  position: relative;
  animation-duration: 0.5s;
  animation-name: animateShadowOut;
}

.hoverShadow:hover {
  animation-duration: 0.5s;
  animation-name: animateShadowIn;
  box-shadow: 0 8px 20px 4px rgba(0, 0, 0, 0.2), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}

.come-in
{
    transform: translateY(150px);
    animation: come-in 0.8s ease forwards;
}

.already-visible
{
    transform: translateY(0);
    animation: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="hoverShadow" id="middleBox">
  <h2 class="headline">Headline</h2>
  <div class="offerContent">
    <p>Some Text</p>
  </div>
</article>

＆＃13;

Answer 1

我相信您正在寻找的答案是：

animation-fill-mode: forwards;

它告诉浏览器使用动画的最后一个关键帧作为新的＆＃34;永久性＆＃34;元素的样式。这意味着动画不会重新开始，动画中的最终位置将保持不变。

以下是文档：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

将鼠标悬停在jQuery

1 个答案: