Анимация непрозрачности / затухания jQuery работает только один раз - PullRequest
Новая
       49

Анимация непрозрачности / затухания jQuery работает только один раз

0 голосов
/ 28 мая 2018

Я создаю персональный сайт.Я исследовал и начал делать это с ключевыми кадрами CSS, но сам нашел решение, используя ключевые кадры jQuery + CSS.

Моя проблема сейчас (на которую, я полагаю, есть простой ответ, который я не вижу, потому что смотрю на своймонитор слишком длинный) моя анимация при наведении мыши работает только один раз .То есть, при наведении мышью: hover, мое изображение 1 превращается в изображения 2 (изображение 1 исчезает), а затем изображение 2 превращается в изображения 3 (изображение 2 исчезает), так что это похоже на каскад.Тем не менее, это работает только один раз, если я наведу курсор мыши снова, это не сработает.

Итак, чтобы прояснить еще раз, я хочу, чтобы эта анимация каскадно-плавно переходила из image1, image2, image3, а затем наоборотout (изображение3, изображение2, изображение1, то есть, как эффект морфинга) КАЖДЫЙ пользовательская мышь: наводит курсор на исходное изображение.

Я предполагаю, что ответ может быть связан сclass «анимированный» добавляется, но не удаляется?Я на самом деле не знаю jQuery, но учил себя экспромту и решил, что если кто-то еще увидит мой код, он может определить синтаксис / ошибку.

ТАКЖЕ

Это лучший способ исчезнуть/ изображения переходят друг в друга?Я хочу, чтобы SMOOTH исчез, как "морфинг" - лучше ли это делать так, как я это делаю?(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;
}

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

для повторения вы должны удалить аним.классы, а также привязать функцию наведения к родительскому элементу 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 голосов
/ 28 мая 2018

Вам нужно удалить классы анимации, как только анимация будет завершена.У вас уже есть слушатель событий для завершения анимации, чтобы добавить обратную анимацию.Вы можете сделать следующее: 

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