How to check if the mouse is away from an element with jQuery?

Question

I'm working on my portfolio. The idea is when i hover an image, that image is fading out and some text are fading in instead. When you leave the text, the process going on the other way. This work perfectly and here is the code.

var cardImgTop = ['.card-img-top-0', '.card-img-top-1', '.card-img-top-2', '.card-img-top-3', '.card-img-top-4', '.card-img-top-5', '.card-img-top-6', '.card-img-top-7', '.card-img-top-8', '.card-img-top-9', '.card-img-top-10', '.card-img-top-11'];

/* the var hiddenPara is not displayed with css rules */
var hiddenPara = ['.hidden-para-0', '.hidden-para-1', '.hidden-para-2', '.hidden-para-3', '.hidden-para-4', '.hidden-para-5', '.hidden-para-6', '.hidden-para-7', '.hidden-para-8', '.hidden-para-9', '.hidden-para-10', '.hidden-para-11', ];

function showHideProject(param1, param2) {
  $(param1).hover(function() {
    $(param1).fadeOut();
    $(param1).hide(function() {
      $(param2).fadeIn(function() {
      });
    });
  })

  $(param2).mouseleave(function() {
    $(param2).fadeOut();
    $(param2).hide(function() {
      $(param1).fadeIn(function() {
      });
    });
  });
};

for (i = 0; i < cardImgTop.length && i < hiddenPara.length; i++) {
  showHideProject(cardImgTop[i], hiddenPara[i]);
};

My problem is, when you hover very fast (so imagine you have 4 pictures side by side and you hover like crazy fast from left to right) the hiddenPara is staying displayed and the cardImgTop is not displayed anymore. And i want, does not matter what that, when the mouse is not detected on that hiddenPara it stays hidden and the cardImgTop stays displayed.

I've tried many combinations, with mousemove and more but nothing is working out till now ...

What would you recommend to me ? I'm still on the dig of course :)

Thanks a lot for your help.

Answer 1

So, i've found the way to do it.

I've added a third parameter that containing the all div. This a card from bootstrap, so there is the image at the top and the body with text just under. And i've added in jQuery the stop function, a bit by coincidence ( i was thinking "maybe it's gone work" and it worked) The idea was to make a switch between them when hovering.

It's for me almost perfect but if you have any idea to improve it, i'm very up to learn ! So means if you go fast from left to right, the text will even not appear but the image will briefly blinking. If you just go hover normally, it will make the effect. Thanks for your help and here is the code :)

 var cardImgTop = ['.card-img-top-0', '.card-img-top-1', '.card-img-top-2', '.card-img-top-3', '.card-img-top-4', '.card-img-top-5', '.card-img-top-6', '.card-img-top-7', '.card-img-top-8', '.card-img-top-9', '.card-img-top-10', '.card-img-top-11']; var hiddenPara = ['.hidden-para-0', '.hidden-para-1', '.hidden-para-2', '.hidden-para-3', '.hidden-para-4', '.hidden-para-5', '.hidden-para-6', '.hidden-para-7', '.hidden-para-8', '.hidden-para-9', '.hidden-para-10', '.hidden-para-11',]; var cardPortfolio = ['.cp0', '.cp1', '.cp2', '.cp3', '.cp4', '.cp5', '.cp6', '.cp7', '.cp8', '.cp9', '.cp10', '.cp11'] function showHideProject(param1, param2, param3){ $(param3).hover( function(){ $(param1).fadeOut(300, function(){ $(param1).hide(); $(param2).fadeIn(300).stop(); }); }, function(){ $(param2).fadeOut(300, function(){ $(param2).hide(); $(param1).fadeIn(300).stop(); }); }); }; for(i = 0; i < cardImgTop.length && i < hiddenPara.length && i < cardPortfolio.length; i++){ showHideProject(cardImgTop[i], hiddenPara[i], cardPortfolio[i]); }; 

 <div class="container-fluid container-protfolio"> <div class="row"> <div class="card-deck"> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12"> <div class="card card-portfolio border-0 bg-transparent cp11"> <img data-src="images/image.jpg" class="card-img-top card-img-top-11" alt="..."> <div class="card-body border-0 bg-transparent hidden-para-11"> <h3 class="text-light">Project name</h3> <p class="text-light">Project description</p> <a class="btn" href="http://path">View project</a> </div> </div> </div> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12"> <div class="card card-portfolio border-0 bg-transparent cp10"> <img data-src="images/image.jpg" class="card-img-top card-img-top-10" alt="..."> <div class="card-body border-0 bg-transparent hidden-para-10"> <h3 class="text-light">Project name</h3> <p class="text-light">Project description</p> <a class="btn" href="http://path">View project</a> </div> </div> </div> <!-- more comes here, there is actually 12 --> </div> </div> 

Answer 2

I once did something similar. I used mouseout() and mouseover() instead. Maybe it helps you.

$("#img_1").mouseover(function () {
  $(this).css("filter", "blur(3px)");
  $(".left").text("Home");
  $(".left").css("font-size", "22px");
});

$("#img_1").mouseout(function () {
  $(this).css("filter", "blur(0px)");
  $(".left").text("");
});