Solution 1 :

Just make a “stronger” CSS selector with a class, and add and remove that on 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>

Solution 2 :

The problem is, that you have to get back to the previous state on hover-out.
So the easiest is to add a couple more classes and add/remove them depending on the hover state (keep in mind, that the order of the classes matter).

I added a class (click-me-next-pause) to stop the animation and two classes (current-active) and (current-active-transparent) to change the state.

You don’t even need the keyword (!important), since the order of the classes matter.

Check out the following example:

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

Problem :

I have a few various pieces that are close to working how I would like them to.

I have four divs. Dependent on the URL being visited, I want one specific div to be in full transparency/active. I would like the next div in the sequence to be animating in and out of transparency simultaneously to make the viewer feel inclined to visit the next page/url in the sequence. I also have a hover state, so when any of the 4 divs are hovered, that one should come into full transparency as well.

I am getting confused when I try to make the hover state the top rule. If any of the divs are hovered, I want all other animations to cease, the hovered div to come into full opacity, and the other 3 divs should go to half opacity (regardless of what page is being visited, etc.).

My code is below, and please let me know if you have any questions. Thank you! Here is also a link to a 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");
});

By

Leave a Reply

Your email address will not be published. Required fields are marked *