Cómo simular el efecto de desplazamiento sobre los dispositivos táctiles?

Question

Tengo una página web con algunas animaciones css3 en hover y me gustaría hacer que funcione en el iPad (y en cualquier dispositivo táctil) cuando el usuario toque estos elementos.
Aquí está mi código:

html:

<div id="headBlock"> 
    <a id="arm"></a> 
    <div id="head"> 
     <div id="blink"></div> 
     <div id="lid"></div> 
     <div id="man"></div> 
     <a id="man-arm"></a> 
    </div> 
</div> 

JS:

//arm 
$('#arm').hover(function(){ 
    $(this).removeAttr('style').css('bottom','244px'); 
    $(this).addClass('hover_effect'); 

    }, function(){ 
     $(this).removeClass('hover_effect'); 
}); 

//man arm 
$('#man').hover(function(){ 
    $('#man-arm').removeAttr('style'); 
    $('#man-arm').addClass('hover_effect'); 

    }, function(){ 
     $('#man-arm').removeClass('hover_effect'); 
}); 

Se puede ver que cuando el ratón introduce los elementos elimino el estilo a continuación, aplicar un estilo y añadir el css clase 'hover_effect' y cuando el mouse se va, elimino la clase 'hover_effect'.
¿Cómo puedo lograr lo mismo en dispositivos táctiles? El evento click no tiene una devolución de llamada, por lo que no puedo eliminar la clase 'hover_effect' después de que ocurra el clic. Intenté mousedown y mouseup pero no funcionó. Busqué stackoverflow y encontré este How do I simulate a hover with a touch in touch enabled browsers? pero no tuvo ningún efecto.
¿Alguna idea de alguien?

Gracias
Mauro

Answer 1

probar este

$('#arm').bind('touchstart', function() { 
     $(this).removeAttr('style').css('bottom','244px'); 
     $(this).addClass('hover_effect'); 
}); 

$('#arm').bind('touchend', function() { 
     $(this).removeClass('hover_effect'); 
}); 

de manera similar para $('#man').

Answer 2

o puede agregar :hover clase bajo css como a#man:hover{....} [mismo ocurre si desea que el mismo efecto o usa diff . colores o imagen para el diff. resultados].