jQuery悬停功能超时-移动开发问题

time-out on jQuery hover function(jQuery悬停功能超时)

本文介绍了jQuery悬停功能超时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在使用下面的代码，使用 jQuery 和悬停功能在用户悬停在图像上时淡入标题"元素.这在桌面浏览器上非常有效，但是在使用 iPad 等移动触摸设备进行测试时，需要用户点击图像以触发悬停功能，标题会按预期淡入，但会保持活动状态，直到用户选择页面上的另一个对象.

I'm currently using the following code below using jQuery and the hover function to fade in a the 'caption' element when the user hovers over the image. This works perfectly on desktop browsers, however when testing it with mobile touch devices such as iPad which requires the user to tap the image to trigger the hover function the caption fades in as expected but stays active until the user selects another object on the page.

我想知道一种简单的方法来修改我的 javascript 代码以检测移动触摸设备，然后在标题中添加某种类型或计时器，以便它在一段时间后自动淡出?

I would like to know a simple way to modify my javascript code to detect mobile touch devices and then put some sort or timer to the caption so that it fades back automatically after a period of time?

<!-- include jQuery library -->
<script type="text/javascript" src="Li9fanMvanF1ZXJ5Lm1pbi5qcw=="></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="Li9faW1nL2V4YW1wbGVfaW1hZ2UuanBn"></a>
    </div>

</body>


任何想法，想法将不胜感激.
Any ideas, thoughts would be most appreciated.
克里斯
推荐答案

您可以通过特征检测来检测触摸设备，然后通过延迟 fadeOut() 相应地调整您的行为::p>

You can detect a touch device with feature detection and then adapt your behavior accordingly with a time-delayed fadeOut():

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return(true);
        } catch (e) {
           return(false);
        }    
    }
    var touchPresent = hasTouch();

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

        //Display the caption
        var caption = $(this).find('.caption');
        caption.stop(true, true).fadeIn(200);
        // on touch systems, fade out after a time delay
        if (touchPresent) {
            caption.delay(5000).fadeOut(600);
        }
    }, function() {    

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

});

这篇关于jQuery悬停功能超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！