jQuery opacity/fade 动画只作用一次

Question

我正在建立个人网站。我研究并开始使用 CSS 关键帧，但我自己找到了使用 jQuery + CSS 关键帧的解决方案。

我现在的问题（我假设有一个我看不到的简单答案，因为我盯着我的显示器看得太久了）是 我的悬停动画只工作一次 .也就是说，在 mouse:hover 上，我的图像 1 淡入图像 2（图像 1 消失），然后图像 2 淡入图像 3（图像 2 消失），所以它就像一个级联。不过这个只能用一次，再悬停就不行了

所以再次澄清一下，我希望这个动画从 image1 到 image2，到 image3 级联淡入淡出，然后反向输出（image3，到 image2，到 image1，即像一些变形效果）每次用户mouse:hover浏览原始图像。

我假设答案可能与添加但未删除的 class "animated" 有关？我实际上不知道 jQuery 但一直在即兴自学，并认为如果其他人看到我的代码，他们可以发现 syntax/bug.

还有

这是 fade/transistion 图片互传的最佳方法吗？我想要平滑的淡入淡出，例如 "morphing" - 这是否按照我的方式最好地完成了？ (jquery+关键帧)，我应该添加更多关键帧以获得更平滑的效果吗？

这是 jsfiddle： http://jsfiddle.net/1xrbxdnk/2/

以及源代码： HTML:

<div class="box">
  <img src="http://alpizano.com/assets/images/venom1.png" width="50%" class="top">
  <img src="http://alpizano.com/assets/images/venom2.png" width="50%" class="middle">
  <img src="http://alpizano.com/assets/images/venom3.png" width="50%" class="bottom">
</div>

JavsScript/jQuery

$("img.top").hover(function() {
  $(this).addClass("animated");
  $("img.middle").addClass("animated2");
  $("img.bottom").addClass("animated3");
})

$("img.bottom").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function() {
    $(this).addClass("animated6")
  $("img.middle").addClass("animated5")
  $("img.top").addClass("animated4")
})

CSS

.box {
  position: relative;
}

img {
  position: absolute;
}

.middle {
  display: none;
}

.bottom {
  display: none;
}

@keyframes anim1 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
}

@keyframes anim2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

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

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

@keyframes anim5 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes anim4 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
}

.top.animated {
  animation: anim1 3s ease-in-out;
  opacity: 0;
}

.middle.animated2 {
  animation: anim2 3s ease-in-out;
  display: block;
  opacity: 0;
}

.bottom.animated3 {
  animation: anim3 3s ease-in-out;
  display: block;
  opacity: 1;
}

.bottom.animated6 {
  animation: anim6 3s ease-in-out;

  opacity: 0;
}

.middle.animated5 {
  animation: anim5 3s ease-in-out;

  opacity: 0;
}

.top.animated4 {
  animation: anim4 3s ease-in-out;
  opacity: 1;
}

Answer 1

动画完成后，您需要删除动画类。您已经有一个用于动画结束的事件侦听器来添加反向动画。您可以执行以下操作：

$("img.bottom").bind("webkitAnimationEnd mozAnimationEnd animationEnd",         
function() {
  if (!$(this).hasClass('animated6')) {
    $(this).addClass("animated6");
    $("img.middle").addClass("animated5");
    $("img.top").addClass("animated4");
  }
  else {
    $(this).removeClass("animated6 animated3");
    $("img.middle").removeClass("animated5 animated2");
    $("img.top").removeClass("animated4 animated");
  }
});

这是您的 fiddle 更新：

http://jsfiddle.net/1xrbxdnk/3/

这是一个片段：

$("img.top").hover(function() {
  $(this).addClass("animated");
  $("img.middle").addClass("animated2");
  $("img.bottom").addClass("animated3");
})

$("img.bottom").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function() {
  if (!$(this).hasClass('animated6')) {
   $(this).addClass("animated6");
    $("img.middle").addClass("animated5");
    $("img.top").addClass("animated4");
  }
  else {
    $(this).removeClass("animated6 animated3");
    $("img.middle").removeClass("animated5 animated2");
    $("img.top").removeClass("animated4 animated");
  }
})

.box {
  position: relative;
}

img {
  position: absolute;
}

.middle {
  display: none;
}

.bottom {
  display: none;
}

@keyframes anim1 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
}

@keyframes anim2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

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

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

@keyframes anim5 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes anim4 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
}

.top.animated {
  animation: anim1 3s ease-in-out;
  opacity: 0;
}

.middle.animated2 {
  animation: anim2 3s ease-in-out;
  display: block;
  opacity: 0;
}

.bottom.animated3 {
  animation: anim3 3s ease-in-out;
  display: block;
  opacity: 1;
}

.bottom.animated6 {
  animation: anim6 3s ease-in-out;

  opacity: 0;
}

.middle.animated5 {
  animation: anim5 3s ease-in-out;

  opacity: 0;
}

.top.animated4 {
  animation: anim4 3s ease-in-out;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <img src="http://alpizano.com/assets/images/venom1.png" width="50%" class="top">
  <img src="http://alpizano.com/assets/images/venom2.png" width="50%" class="middle">
  <img src="http://alpizano.com/assets/images/venom3.png" width="50%" class="bottom">
</div>

Answer 2

为了重复，您必须删除动画。类并将悬停功能绑定到父项 div.box

$(".box").hover(function() {

  $("img.top").removeClass().addClass("top");
  $("img.middle").removeClass().addClass("middle");
  $("img.bottom").removeClass().addClass("bottom");

  $(this).addClass("animated");
  $("img.middle").addClass("animated2");
  $("img.bottom").addClass("animated3");
})

$("img.bottom").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function() {
    $(this).addClass("animated6")
  $("img.middle").addClass("animated5")
  $("img.top").addClass("animated4")
})

jQuery opacity/fade 动画只作用一次

jQuery opacity/fade animation only works once

jquery

animation

image

fade

hover

还有