悬停并冻结然后行动

时间:2013-10-02 14:55:05

标签: jquery hover settimeout

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

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

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

1 个答案:

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

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