Triggering A Fade In/fade Out From Another Element Causes The Fading Element To Stick When Switching Trigger Elements

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

Solution 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;
}

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