0

我有一个包含三张图片的联系页面，当您将鼠标悬停在图片上时，有关此图片的文字将显示在单独的框中。问题是他们快速移动鼠标（在一秒钟内悬停两三张图片）所有描述都显示得一团糟。

有没有办法让它在你悬停图片时，只有当指针保持冻结状态时，比如说一秒钟，然后才会显示文本？

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);
    });
4

1 回答 1

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
});

我不太确定间隔选项......但只是做一些测试。

于 2013-10-02T15:09:53.943 回答