超时jQuery悬停功能 [英] time-out on jQuery hover function
问题描述
我目前使用下面的代码使用jQuery和悬停函数在用户悬停在图像上时淡入caption元素。这在桌面浏览器上完美运行，但是当使用iPad等移动触摸设备进行测试时，需要用户点击图像以触发悬停功能，字幕按预期淡入，但保持活动状态，直到用户在页面上选择另一个对象。
我想知道一个简单的方法来修改我的javascript代码来检测移动触摸设备，然后将一些排序或计时器添加到标题中，以便在标题后自动淡化一段时间？
<！ - include jQuery library - >
< script type =text / javascriptsrc =./_ js / jquery.min.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
//当鼠标移过这些缩略图时
$（'。item-caption'）。hover（ function（）{
//显示标题
$（this）.find（'。caption'）。stop（false，true）.fadeIn（200）;
}，
function（）{
//隐藏标题
$（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>说明< / h3>< / li>
< / ul>
< / div>
< img src =./_ img / example_image.jpg>< / a>
< / div>
< / body>
任何想法，想法都将得到最多赞赏。
Chris
您可以检测具有功能检测功能的触控设备，然后相应地将您的行为与时间延迟的 fadeOut（）： $（document）.ready（function（） {
函数hasTouch（）{
try {
document.createEvent（TouchEvent）;
return（true）;
} catch（e ）{
return（false）;
}
}
var touchPresent = hasTouch（）;
//将鼠标悬停在这些缩略图上
$（'。item-caption'）。hover（function（）{
//显示标题
var caption = $（this）.find（'。caption'）;
caption.stop（true，true）.fadeIn（200）;
//在触摸系统上，延时后淡出
if（touchPresent）{
caption.delay （5000）.F adeOut（600）;
}
}，function（）{
//隐藏标题
$（this）.find（'。caption'）。停止（true，true）.fadeOut（600）;
}）;
}）;
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.
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="./_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>
Any ideas, thoughts would be most appreciated.
Chris
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悬停功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
