Отображать предварительный просмотр изображения только тогда, когда мышь зависла после 1 секунды задержки

Question

Отображать предварительный просмотр изображения только тогда, когда мышь зависла после 1 секунды задержки

0

Я показываю предварительный просмотр изображения при наведении на изображение. Теперь я сохраняю интервал перед отображением изображения предварительного просмотра. скажем, я установил задержку как 1 сек, и в этом случае, если я вытащил мышь из изображения, она все еще отображает предварительный просмотр, так как она запускается во время ввода мыши. Как это исправить?

Мне нужно отображать предварительный просмотр только при наведении после 1сек задержки, а не если мышь не с изображением?

Babu 03 апр. 2014, в 12:22

Источник

0

использовать таймер ( setTimeout() ) для задержки отображения
Arun P Johny 03 апр. 2014, в 09:47
0

см. jsfiddle.net/arunpjohny/xfCwU/4
Arun P Johny 03 апр. 2014, в 09:56

Теги:

javascript

jquery

mouseover

3 ответа

2

В jQuery 1. 9+ вы можете использовать delay/finish:

ДЕМО jsFiddle

$("#preview").hover(function(){
    $("img").delay(1000).show(0); // passing 0 to show() will put animation in queue
}, function(){
    $("img").finish().hide(); // finish() will clear any previous delay(), despite what argues the DOC
});

A. Wolff 03 апр. 2014, в 07:30

0

Извините, я использую jQuery <1.9. Я обязательно проверю это и передам комментарий. Спасибо :)
Babu 03 апр. 2014, в 10:19

0

Назначьте setTimeout переменной в событии mouseover следующим образом:

var timer = setTimeout(function() { doSomething(); }, 1000);

И затем очистите его на событии mouseout, чтобы он не показывался, когда вы наводили его:

clearTimeout(timer);

denat 03 апр. 2014, в 07:08

Ещё вопросы

использовать таймер ( setTimeout() ) для задержки отображения
Извините, я использую jQuery <1.9. Я обязательно проверю это и передам комментарий. Спасибо :)

Arun P Johny · Accepted Answer · 2014-04-03T08-45-00.000Z

Основным скелетом, использующим setTimeout(), может быть

var timer;
$('img').hover(function () {
    timer = setTimeout(function () {
        //do your stuff here
        $('div').show();

        timer = undefined;
    }, 1000);
}, function () {
    if (timer) {
        clearTimeout(timer);
        timer = undefined;
    } else {
        //hide the preview
        $('div').hide();
    }
})

Демо: скрипка