Как добавить класс в div без зависания с помощью jQuery / JS

Question

У меня есть несколько различных работ, которые почти работают так, как я бы хотел.

У меня четыре див. В зависимости от посещаемого URL-адреса я хочу, чтобы один конкретный c div был полностью прозрачным / активным. Я хотел бы, чтобы следующий div в последовательности анимировался одновременно с прозрачностью и выходом из нее, чтобы зритель почувствовал склонность посетить следующую страницу / URL-адрес в последовательности. У меня также есть состояние зависания, поэтому, когда любой из 4 div зависает, он также должен стать полностью прозрачным.

Я запутываюсь, когда пытаюсь сделать состояние наведения верхним правилом. Если какой-либо из div зависает, я хочу, чтобы все остальные анимации прекратились, зависший div стал полностью непрозрачным, а остальные 3 div должны были go до половины непрозрачности (независимо от того, какая страница посещается, и т. Д. c .).

Мой код находится ниже, дайте мне знать, если у вас возникнут вопросы. Спасибо! Вот также ссылка на CodePen: https://codepen.io/summeropratt/pen/LYpoVYg

HTML

<div class="parent">
  <div class="child div1">
    <h2>Div 1</h2>
  </div>
  <div class="child div2">
    <h2>Div 2</h2>
  </div>
  <div class="child div3">
    <h2>Div 3</h2>
  </div>
  <div class="child div4">
    <h2>Div 4</h2>
  </div>
</div>

CSS

.child {
  opacity: .5;
  transition: .2s;
}
.full-transparency {
  opacity: 1 !important;
  cursor: pointer !important;
}
.click-me-next  {
  animation-name: click-me-next;
  animation-duration: 2s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}
@keyframes click-me-next{
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

JS

// if(window.location.pathname == '/div3-url/') {
  var opacity = $(".div3").css("opacity");
  console.log("opacity", opacity);
  $(".div3").css("opacity", 1);

  var div4 = document.getElementsByClassName("div4")[0];
  div4.classList.add("click-me-next");
// });

$(".child").hover(function() {
    $(this).addClass("full-transparency");
  }, function() {
    $(this).removeClass("full-transparency");
});

Answer 1

Проблема в том, что вам нужно вернуться в предыдущее состояние при зависании. Так что проще всего добавить еще пару классов и добавить / удалить их в зависимости от состояния наведения (имейте в виду, что порядок классов имеет значение).

Я добавил класс (click-me-next-pause) в остановите анимацию и два класса (current-active) и (current-active-transparent), чтобы изменить состояние.

Вам даже не нужно ключевое слово (!important), так как порядок классов имеет значение.

Посмотрите следующий пример:

// if(window.location.pathname == '/div3-url/') {
  var opacity = $(".div3").addClass("current-active");
  
  var div4 = document.getElementsByClassName("div4")[0];
  div4.classList.add("click-me-next");
// });

$(".child").hover(function() {
    $(".click-me-next").addClass("click-me-next-pause");
    $(".current-active").addClass("current-active-transparent");
    $(this).addClass("full-transparency");
  }, function() {
    $(this).removeClass("full-transparency");
    $(".click-me-next").removeClass("click-me-next-pause");
    $(".current-active").removeClass("current-active-transparent");
});

.child {
  opacity: .5;
  transition: .2s;
}
.current-active
{
  opacity: 1;
}
.current-active-transparent
{
  opacity: 0.5;
}
.full-transparency {
  opacity: 1 ;
  cursor: pointer;
}
.click-me-next  {
  animation-name: click-me-next;
  animation-duration: 2s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}
.click-me-next-pause{
  animation-iteration-count: 0 ;
  animation-play-state: pause ;
}
@keyframes click-me-next{
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <!-- first child -->
  <div class="child div1">
    <h2>Div 1</h2>
  </div>
  <!-- second child -->
  <div class="child div2">
    <h2>Div 2</h2>
  </div>
  <!-- third child -->
  <div class="child div3">
    <h2>Div 3</h2>
  </div>
  <!-- fourth child -->
  <div class="child div4">
    <h2>Div 4</h2>
  </div>
</div>

Answer 2

Просто сделайте «более сильный» селектор CSS с классом, а add и remove - с hover(over, out)

$(".child").hover(
  function() {
    $(".child").each(function(i, el) {
      $(el).addClass('hover')
    })
  },
  function() {
    $(".child").each(function(i, el) {
      $(el).removeClass('hover')
    })
  }
)

.child {
  opacity: .5;
  transition: .2s;
}

.full-transparency {
  opacity: 1 !important;
  cursor: pointer !important;
}

.full-transparency.hover {
  opacity: .5 !important;
}

.click-me-next.hover {
  opacity: 1 !important;
  cursor: pointer;
}

.click-me-next {
  animation-name: click-me-next;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes click-me-next {
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child div1">
    <h2>Div 1</h2>
  </div>
  <div class="child div2">
    <h2>Div 2</h2>
  </div>
  <div class="child full-transparency div3">
    <h2>Div 3</h2>
  </div>
  <div class="child click-me-next div4">
    <h2>Div 4</h2>
  </div>
</div>