Zeitüberschreitung bei der jQuery-Hover-Funktion

Question

Nov 16, 2012, 06:15 PM

Zeitüberschreitung bei der jQuery-Hover-Funktion

Ich verwende derzeit den folgenden Code unter Verwendung von jQuery und der Hover-Funktion, um das Element "caption" einzublenden, wenn der Benutzer den Mauszeiger über das Bild bewegt. Dies funktioniert perfekt in Desktop-Browsern. Wenn Sie es jedoch mit mobilen Touch-Geräten wie dem iPad testen, muss der Benutzer auf das Bild tippen, um die Hover-Funktion auszulösen. Die Beschriftung wird wie erwartet eingeblendet, bleibt jedoch aktiv, bis der Benutzer ein anderes Objekt auf der Seite auswählt.

Ich möchte einen einfachen Weg kennen, um meinen Javascript-Code zu ändern, um mobile Touch-Geräte zu erkennen, und dann der Beschriftung eine Art oder einen Timer zuzuweisen, damit er nach einer bestimmten Zeit automatisch wieder ausgeblendet wird.

<!-- 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>

Irgendwelche Ideen, Gedanken würden am meisten geschätzt.

Chris