завис и заморозь тогда действие

Question

завис и заморозь тогда действие

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

user2839061 02 окт. 2013, в 17:08

Источник

Теги:

jquery

settimeout

hover

1 ответ

Ещё вопросы

Oliboy50 · Answer 1 · 2013-10-02T13-07-00.000Z

Я предлагаю вам использовать плагин 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
});

Я не слишком уверен в опции интервала... но просто делаю некоторые тесты.

Вы спасли мою задницу! Большое спасибо!