Question

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

有没有办法让它成为当你悬停图片时，只有指针保持冻结让我们说一秒钟，那么文本会显示？

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

Answer 1

我建议您使用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
});

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

悬停并冻结然后行动

1 个答案: