触发另一个元素的淡入/淡出会导致在切换触发元素时淡入淡出粘贴

Question

I asked a question earlier about fading an element in and out which was answered with the solution I will post later on, however I left out some information that proves to be more relevant than I originally realized.

I am trying to fade an element in on the hover of a separate trigger element and out when the mouse leaves that same trigger element. currently if I move from one trigger element to another trigger element the first element doesn't fade out.

I have tried a number of solutions including the following two jsfiddles which handle the fading fine but still have the issue I was having occuring when switching trigger elements.

Here is the current mock up of code I'm using:

<img id="project1-img" src="https://i.imgur.com/ZEDaxij.jpg" style="height: 100px; width: 100px; opacity: 0;">
<img id="project2-img" src="https://i.imgur.com/ZEDaxij.jpg" style="height: 100px; width: 100px; opacity: 0;">
<img id="project3-img" src="https://i.imgur.com/ZEDaxij.jpg" style="height: 100px; width: 100px; opacity: 0;">

<span id="trigger1">
111111111111
</span>

<span id="trigger2">
22222222222
</span >

<span id="trigger3">
33333333333
</span>

let state = "disappeared"; // disappeared, appearing, appeared, disappearing
let opacity = 0; // Current raw opacity value
let fadeInc = 0.05; // Amount to fade each frame

let findElementToFade = (imageId) => {
    let elem = document.getElementById(imageId);
        tryDoFade(elem);
}

let tryDoFade = elem =>
  requestAnimationFrame(() => {
    //console.log("called with " + imageId);
    //let state = "disappeared"; // disappeared, appearing, appeared, disappearing

    let changed = false;
    if (state === "appearing" && opacity < 1)
      opacity = Math.min(1, opacity + fadeInc);
    else if (state === "disappearing" && opacity > 0)
      opacity = Math.max(0, opacity - fadeInc);

    elem.style.opacity = opacity;

    // Enter a rest state if opacity maxes out in either direction
    if (opacity === 0) state = "disappeared";
    else if (opacity === 1) state = "appeared";

    // Keep animating if not in a rest state
    if (state === "disappearing" || state === "appearing") tryDoFade(elem);
  });

let e = document.getElementById('trigger1');
e.onmouseover=() =>(state = "appearing") && findElementToFade(`project3-img`)
e.onmouseout=() =>(state = "disappearing") && findElementToFade(`project3-img`)

let f = document.getElementById('trigger2');
f.onmouseover=() =>(state = "appearing") && findElementToFade(`project2-img`)
f.onmouseout=() =>(state = "disappearing") && findElementToFade(`project2-img`)

let g = document.getElementById('trigger3');
g.onmouseover=() =>(state = "appearing") && findElementToFade(`project1-img`)
g.onmouseout=() =>(state = "disappearing") && findElementToFade(`project1-img`)

Here are the JsFiddles I've been playing with: https://jsfiddle.net/dm9cgysL/1/

This is the solution to my last question which doesn't work in my particular case: https://jsfiddle.net/03sgm1ot/

Here is a jsfiddle that is more accurate to what I am trying to do: https://jsfiddle.net/dm9cgysL/6/

I expect for each of the elements to fade in and out independently as soon as the mouse enters/exits the trigger elements, currently if I go from one trigger element to the next it causes the previous fade to stop in its tracks leaving the element on the page.

RESOLVED: I modified the answer I marked as the answer to fit my needs here is what I did:

CSS:

img.transition {
  transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -webkit-transition: opacity 0.25s;
  opacity: 0;
}

img.transition.visible {
  opacity: 1;
}

The images I used have a class name of transition :

<img id="project1-img" src="/static/media/mtg.4c420286.png" class="ui fluid image transition" >

My trigger elements have the following mouse events:

onMouseOver={() => handleTransition(`project1-img`)}
onMouseOut={() => handleTransition(`project1-img`)}

And my handleTransition function is as follows:

const handleTransition = id => {
  let target = document.getElementById(id);
  if (target.classList.contains("visible")) {
    target.classList.remove("visible");
  } else {
    target.classList.add("visible");
  }
};

This is a much cleaner solution to the issue I was having, I didn't realize that css had built in transitions like this and I'm going to have to look into them further. Thanks to everyone who took a look and thanks to GammaGames for the solution that got me here.

Answer 1

Learning css would really help with this case, especially since you're modifying the element's css manually with the style attribute anyway. I'm sure you could use data attributes to store timeout ids or something hacky, but for a simple solution I:

1. Add a data-target attribute to each <span> that I want to listen to
2. On mouseover, add a visible class to the image with the matching target id
3. On mouseout, remove the visible class to the image with the matching target id

img tags with the transition class have 0 opacity by default and transition with 0.25s time. The visible class makes the opacity into 1, and the element automatically transitions. You can read more about transitions here .

 $(".trigger").on("mouseover", function() { let target = $(this).data("target"); $(`#${target}`).addClass("visible"); }); $(".trigger").on("mouseout", function() { let target = $(this).data("target"); $(`#${target}`).removeClass("visible"); }); 

 img.transition { transition: opacity 0.25s; -moz-transition: opacity 0.25s; -webkit-transition: opacity 0.25s; opacity: 0; } img.transition.visible { opacity: 1; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <img class="transition" id="project1-img" src="https://picsum.photos/100"> <img class="transition" id="project2-img" src="https://picsum.photos/100"> <img class="transition" id="project3-img" src="https://picsum.photos/100"> </div> <div> <span class="trigger" data-target="project3-img"> 111111111111 </span> <span class="trigger" data-target="project2-img"> 22222222222 </span > <span class="trigger" data-target="project1-img"> 33333333333 </span> </div>