ALSO

Question

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

我现在的问题（我假设有一个我无法看到的简单答案，因为我一直盯着我的显示器太久）是我的悬停动画只能运行一次。也就是说，在鼠标悬停时，我的图像1淡入图像2（图像1消失），然后图像2淡入图像3（图像2消失），因此它的＆＃39;像一个级联。但是，这只能工作一次，如果我再次盘旋，它就不会工作。

所以再次澄清一下，我希望这个动画级联-fade从image1，到image2，再到image3，然后反转（image3，到image2，到image1，就像一些变形效果） EVERY-TIME 用户鼠标：悬停在原始图像上。

我假设答案可能与class＆＃34;动画＆＃34;被添加但未删除？我实际上并不了解jQuery，但一直在教我自己即兴，并想到如果别人看到我的代码，他们可以发现语法/错误。

ALSO

这是将图像淡化/转换为另一种图像的最佳方法吗？我想要一个平滑的淡入淡出，就像变形＆＃34;变形＆＃34; - 这是我做得最好的方式吗？（jquery + keyframes），我应该添加更多关键帧以获得更平滑的效果吗？

这是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");
  }
});

这里更新了你的小提琴：

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

这是一个片段：

＆＃13;

$("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");
  }
})

＆＃13;

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

＆＃13;

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

＆＃13;

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动画仅适用

ALSO

2 个答案: