Hover effect on mobile

Question

I have a simple jquery function that fades in an overlay on hover of an image:

if($(".portfolioThumbs").length>0){
$(".magnify").css("opacity","0");
$(".magnify").hover(function(){$(this).stop().animate({opacity:1},"slow")},function()     {$(this).stop().animate({opacity:0},"slow")}
)};

How can I get this same effect to work on mobile? I read somewhere you can use 'touchstart' and 'touchend' - if that is right, how could I combine that into this function?

Thanks!

have a look: http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both — mercsen, Jan 25 '13 at 04:49
however, my experience is that a click on a mobile device triggers hover and click events. Mousedown should help you to decide — mercsen, Jan 25 '13 at 04:51
looks promising - but not sure how I could rewrite this code, or indeed write something else for it? any suggestion? — Palemo, Jan 25 '13 at 04:51

score 0 · Accepted Answer · answered Jan 25 '13 at 04:59

0

maybe something like that could work.

var hoverStart = function(evt){
    $(this).stop().animate({
        opacity:1
    },"slow")
};
var hoverEnd = function(evt)     {
    $(this).stop().animate({
        opacity:0
    },"slow")
}
if($(".portfolioThumbs").length>0){
    $(".magnify").css("opacity","0");
    $(".magnify").bind('touchstart',hoverStart);
    $(".magnify").bind('touchend',hoverEnd);
    $(".magnify").hover(hoverStart, hoverEnd);
}

answered Jan 25 '13 at 04:59

mercsen

692
1
5
21

Yep, that is better, but the animate is a bit jagged, and plus it goes automatically to another URL after fade. Can it be double clicked, so on desktop it is fine - but on mobile two clicks (one for effect, the other to go to URL) – Palemo Jan 25 '13 at 05:04
maybe you have to add `evt.preventDefault()` or `evt.stopPropagation()`to yout toch function, thous you will need two functions, one for hover, one for hover. doubleclick on mobile devices are nearly impossible. most browser will zoom at a double touch, had the same issue once :( – mercsen Jan 25 '13 at 05:07
ok. but first click is to show animate, and then once that finishes second click is to go to URL - but only for mobile. Is that what you mean? – Palemo Jan 25 '13 at 05:09
not really but ist a good idea. simply attach a event handler using `animate(param, speed, CALLBACK)` to attach a clickhandler once the animation is finished. or you could save sate state with a flag – mercsen Jan 25 '13 at 05:12

Hover effect on mobile

1 Answers1