tempo limite na função hover do jQuery

Question

Nov 16, 2012, 06:15 PM

tempo limite na função hover do jQuery

Atualmente, estou usando o seguinte código abaixo usando jQuery e a função hover para desaparecer em um elemento de 'legenda' quando o usuário passa o mouse sobre a imagem. Isso funciona perfeitamente em navegadores de desktop, no entanto, ao testá-lo com dispositivos de toque móvel como o iPad, que exige que o usuário toque na imagem para acionar a função de foco, a atenuação aparece como esperado, mas permanece ativa até que o usuário selecione outro objeto na página.

Gostaria de saber uma maneira simples de modificar meu código JavaScript para detectar dispositivos móveis de toque e, em seguida, colocar algum tipo ou timer na legenda para que ele apague automaticamente após um período de tempo?

<!-- include jQuery library -->
<script type="text/javascript" src="./_js/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //On mouse over those thumbnail
    $('.item-caption').hover(function() {

        //Display the caption
    $(this).find('.caption').stop(false,true).fadeIn(200);
    },
    function() {    

    //Hide the caption
    $(this).find('.caption').stop(false,true).fadeOut(600);
});

});
</script>

</head>
<body>

    <div class="item-caption"><a href="http://www.domain.com">
        <div class="caption">   
            <ul>
                <li><h2>TITLE</h2></li>
                <li><h3>Description</h3></li>
            </ul>       
        </div>
        <img src="./_img/example_image.jpg"></a>
    </div>

</body>

Quaisquer ideias, pensamentos seriam mais apreciados.

Chris