jQuery: fadeIn / fadeOut on hover - alternatives on mobile devices?

Question

I'm using fadeIn and fadeOut in jQuery and it works fine on desktop. However, on mobile devices (I've only tested on iPhones though), the child div opens on touch but won't hide after touching an outside element. I'm fairly new to jQuery so I'm not quite sure what kind of solution I could implement here. Perhaps mobile detection and execute touch to open/hide, although I have no idea how I can do this. Here's my JSFiddle:

https://jsfiddle.net/9LL3mmzt/

jQuery:

$(document).ready(function() {
  $(".parent").hover(function() {
    $(this).children(".child").fadeIn("fast");
  }, function() {
    $(this).children(".child").fadeOut("fast");
  });
});

HTML:

<div class="parent">
  <span>Peek-A-</span>
  <div class="child">
    <span>Boo</span>
  </div>
</div>

CSS:

.child {
  display: none;
}

I tried the first solution from this thread: time-out on jQuery hover function

However, I could not make it work correctly due to my limited knowledge.

Nick Van Loocke · Answer 1 · 2017-08-11T10:18:11.143

1

The hover function isn't really what you should be using on touch devices. I think you need to check out the touchstart function.

Edit 1: An example is this:

$('div.example').on("touchstart", function (e) {
    alert('testing');
});

But keep in mind that you can still use your hover javascript but you must specify this for only using it on no-touch devices. See Modernizr for this.

Hope this helps.

FYI @James Douglas as you can see I can't post any comments yet because of my reputation score. And if possible please comment or help us find the anwser for this question I think that would be more useful.

Edit 2: Modernizr is very handy. In your case you get a class touch or no-touch (on the html element) depending on which device you are.

So in my example you could use it then as $('.touch div.example')...

There are possibly different solutions but I think this is the best way (also see What's the best way to detect a 'touch screen' device using JavaScript?). You just need to add de modernizr.js file to your website (best in the head of your webpage).

Edit 3: I have tested your jsfiddle example on iPhone and Android and it works. So for me it's a good.

edited Aug 11 '17 at 10:18

answered Aug 10 '17 at 15:39

Nick Van Loocke

488
2
12

If you care to elaborate a bit then please edit your answer. If not, you should post this as a comment instead. – James Douglas Aug 10 '17 at 15:44
@Nick An example would be nice! – Mark Hedberg Aug 10 '17 at 16:03
@Nick, is it possible to just use if/else statements instead of using Modernizr? It seems like it's way too complicated. – Mark Hedberg Aug 11 '17 at 08:56
@Nick, I incorporated this solution using your example and the solution from the thread I linked in OP: https://jsfiddle.net/tkeaoffd/ It works fine at least on iPhones, is this solution plausable? – Mark Hedberg Aug 11 '17 at 09:32

score 0 · Answer 2 · answered Aug 11 '17 at 09:36

I was able to make this work (at least on iPhones) using the example from @Nick's post and the solution from the thread I linked in OP:

Here's the JSFiddle: https://jsfiddle.net/tkeaoffd/

JQuery:

$(document).ready(function() {
  function hasTouch() {
    try {
      document.createEvent("TouchEvent");
      return (true);
    } catch (e) {
      return (false);
    }
  }
  var touchPresent = hasTouch();
  $('.parent').hover(function() {
    var caption = $(this).find('.child');
    caption.stop(true, true).fadeIn("fast");
    if (touchPresent) {
      $('.parent').on("touchstart", function(e) {
        $(this).children(".child").fadeToggle("fast");
      });
    }
  }, function() {
    $(this).find('.child').stop(true, true).fadeOut("fast");
  });
});

HTML / CSS:

<div class="parent">
  <span>Peek-A-</span>
  <div class="child">
    <span>Boo</span>
  </div>
</div>


.child {
  display: none;
}

jQuery: fadeIn / fadeOut on hover - alternatives on mobile devices?

2 Answers2