我目前正在使用下面的代码，使用 jQuery 和悬停函数在用户将鼠标悬停在图像上时淡入“标题”元素。这在桌面浏览器上完美运行，但是当使用 iPad 等移动触摸设备进行测试时，需要用户点击图像来触发悬停功能，标题会按预期淡入，但保持活动状态，直到用户选择页面上的另一个对象。
我想知道一种简单的方法来修改我的javascript代码以检测移动触摸设备，然后对标题进行某种排序或计时器，以便在一段时间后自动淡出？
<!-- 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>
任何想法、想法将不胜感激。
Chris
您可以通过功能检测来检测触摸设备，然后通过延时来相应地调整您的行为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);
});
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
