我有一个包含三张图片的联系页面,当您将图片悬停时,有关此图片的文字将显示在单独的框中。问题是他们你快速移动你的鼠标(在一秒钟内盘旋两三张图片)所有的描述都是一团糟。
有没有办法让它成为当你悬停图片时,只有指针保持冻结让我们说一秒钟,那么文本会显示?
,jQcode是:
$('#pic1').mouseenter(function() {
myTimeout = setTimeout(function() {
if (hidden2.hasClass("active") ){hidden2.fadeOut(200).removeClass('active').css('display','none');}
if (hidden3.hasClass("active") ){hidden3.fadeOut(200).removeClass('active').css('display','none');}
hidden1.fadeIn(900).addClass('active');
}, 1500);
});
$('#pic2').mouseenter(function() {
myTimeout = setTimeout(function() {
if (hidden1.hasClass("active") ){hidden1.fadeOut(200).removeClass('active').css('display','none');}
if (hidden3.hasClass("active") ){hidden3.fadeOut(200).removeClass('active').css('display','none');}
hidden2.fadeIn(900).addClass('active');
}, 1500);
});
$('#pic3').mouseenter(function() {
myTimeout = setTimeout(function() {
if (hidden1.hasClass("active") ){hidden1.fadeOut(200).removeClass('active').css('display','none');}
if (hidden2.hasClass("active") ){hidden2.fadeOut(200).removeClass('active').css('display','none');}
hidden3.fadeIn(900).addClass('active');
}, 1500);
});
答案 0 :(得分:0)
我建议您使用hoverIntent插件:http://cherne.net/brian/resources/jquery.hoverIntent.minified.js
以下是一些文档:http://cherne.net/brian/resources/jquery.hoverIntent.html
$('#pic1').hoverIntent({
over: function () {
if (hidden2.hasClass("active") ){
hidden2.fadeOut(200).removeClass('active').css('display','none');
}
if (hidden3.hasClass("active") ){
hidden3.fadeOut(200).removeClass('active').css('display','none');
}
hidden1.fadeIn(900).addClass('active');
},
out: function () {
// Do something when mouseOut
},
//selector: '.aClass',
timeout: 10, // Timer before executing out function
interval: 1000 // Timer before executing over function
});
我对间隔选项不太确定......但只是做一些测试。