Have image display on mouse over text, delay with hide or hide immediately if mouseover new text

Question

So I have so an image will show when certain text is moused over, it will delay when the mouse is taken off before disappearing and that works just fine. But I have multiple images that can show up depending on the text hovered, I want to have the first image skip it's delay if other text is moused over so it doesn't expand the page and stack the images. Is this possible? Or will I just need to pull the delay off? This is done within JQuery

$("h2").mouseover(function ()
    {
        let mouseText = $(this).attr("class").split(" ")[0];
        
        switch(mouseText)
        {
            case "wh-light":
                imgID += mouseText;
                break;
            case "wh-hl-ll":
                imgID += mouseText;
                break;
            case "part-hh-ll":
                imgID += mouseText;
                break;
        }

        $(imgID).show();
    });

$("h2").mouseout(function ()
    {
        $(imgID).delay(1000).hide(0);
    });

I can supply the HTML but I don't think it is too relevant to this. Thank you in advance for your help!

Answer 1

Without having your template and complete code, I'd have to contrive a full example... but the below snippet should give you a good example of what you'll have to do. You'll need to keep track of the current image and your callback has to know what the current image was when the delay was kicked off and compare it to the current to know whether it should do anything or not.

For this reason I pulled the code into separate javascript functions and used setTimeout instead of the jquery delay(). The documentation on the actual jquery site even mentions that the delay function is limited and has no way to cancel itself and as such should not be treated as a replacement for setTimeout().

Ref https://api.jquery.com/delay/

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Without knowing how you were building the imgID variable or clearing it out... I added the baseImageID and targetImageID variables so that you don't end up just continuously concatenating the new strings onto the end of imgID...

As a last note... I like to make things very modular and verbose when talking through a solution so please dont hate on the extra functions... I think they make the solution easier to understand. The actual implementation can be streamlined...

let baseImageID = 'image-';
let targetImageID = '';
let currentImageID = '';

const hideImageNow = function(imageID) {
  $(imageID).hide();
  if (currentImageID == imageID) {
    currentImageID = '';
  }
};

const hideImageLater = function(imageID, delay) {
  setTimeout(hideImageNow, delay, imageID);
};

const showImage = function(imageID) {
  if (currentImageID != '') {
    hideImageNow(currentImageID);
  }
  currentImageID = imageID;
  $(imageID).show();
};

$("h2").mouseover(function() {
  targetImageID = baseImageID;
  let mouseText = $(this).attr("class").split(" ")[0];

  switch (mouseText) {
    case "wh-light":
      targetImageID += mouseText;
      break;
    case "wh-hl-ll":
      targetImageID += mouseText;
      break;
    case "part-hh-ll":
      targetImageID += mouseText;
      break;
  }

  showImage(targetImageID);
});

$("h2").mouseout(function() {
  hideImageLater(currentImageID, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>