jQuery不透明度/淡入淡出动画只能使用一次

问题描述 投票:1回答:2

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

我现在的问题(我假设有一个简单的答案,我看不到,因为我一直盯着我的显示器太久)是我的悬停动画只能工作一次。也就是说,在鼠标悬停时,我的图像1淡入图像2(图像1消失),然后图像2淡入图像3(图像2消失),因此它就像一个级联。但是,这只能工作一次,如果我再次悬停,它将无法正常工作。

所以再次澄清,我希望这个动画级联-fade从image1,到image2,再到image3,然后反向输出(image3,到image2,到image1,就像一些变形效果)每时候用户鼠标:悬停在原始图像。

我假设答案可能与class“动画”被添加但未被删除?我实际上不知道jQuery,但一直在教我自己即兴,并想到如果别人看到我的代码,他们可以发现语法/错误。

ALSO

这是将图像淡化/转换为另一种图像的最佳方法吗?我想要一个光滑的淡入淡出,就像一个“变形” - 这是我做得最好的方式吗? (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>

的JavaScript / 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;
}
jquery image animation hover fade
2个回答
0
投票

为了重复,你必须删除动画。类,并将悬停函数绑定到父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")
})

0
投票

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

$("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/

这是一个片段:

$("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>
© www.soinside.com 2019 - 2024. All rights reserved.