iOS .click() --> .fadeOut() not allowing for later mouseenter --> .fadeIn()

Question

I have a very simple mouseenter on tab to fadeIn child div thing going on, but I want touch devices to be able to tap on a close link to fadeOut the child. That's working smoothly.

When the iOS user taps again on the tab to fadeIn its child, it fades in and then immediately out. Try the third time, and it doesn't even fadeIn.

How do I get every tap of the tab to fadeIn like it was the first time?

The jQuery

    $('#form').on({
    mouseenter: function () {
        clearTimeout( $(this).data('timeoutId') );
        $(this).children('div').fadeIn(300);
        $('#oops').fadeIn(80);
    },
    mouseleave: function() {
        var self = this;
        var timeoutId = setTimeout( function() {
            $(self).children('div').fadeOut(700);
                $('#oops').fadeOut(300);
        }, 700);
        $(self).data('timeoutId', timeoutId);
    }

});
$('#closer').click(function(){
    $('.hiding').fadeOut(700);
    $('#oops').fadeOut(400);                                    
});

Here's the fiddle: http://jsfiddle.net/natejones/mnWb6/

do you want it to behave exactly like hover? – Huangism Jun 01 '12 at 14:50 — Huangism, Jun 01 '12 at 14:50

Huangism · Accepted Answer · 2012-06-01T15:02:25.040

0

If you want it to behave exactly like hovering then

$('#form').live('touchstart', function() {
   $(this).trigger('mouseenter');
});
$('#form').live('touchend', function() {
   $(this).trigger('mouseleave');
});

I think that's the correct code, but if not, that's the idea. If you want it to do different things then you can define it in touchstart/touchend. I think this applies only to iOS but I could be wrong. Touchstart is when your finger touches the screen and touchend is when your finger leaves the screen. There is also touchmove which is when your finger is on the screen and moving.

edited Jun 01 '12 at 15:02

answered Jun 01 '12 at 14:52

Huangism

16,278
7
48
74

This definitely gets closer. The subsequent .tab taps do trigger the .hiding div to fade in, but it immediately faded out. – natejones Jun 01 '12 at 16:41
yes it fades out because when your finger leaves, it calls the mouseleave (like hover) so yes if you take it out it will stay – Huangism Jun 01 '12 at 17:50

iOS .click() --> .fadeOut() not allowing for later mouseenter --> .fadeIn()

1 Answers1