Нужна помощь по использованию clearTimeout (); и setTimeout); Не могу найти решение - PullRequest
Новая
       26

Нужна помощь по использованию clearTimeout (); и setTimeout); Не могу найти решение

0 голосов
/ 12 марта 2012

Мне нужно, чтобы div (#thumbnails) отображался и скрывался при наведении курсора мыши на div (#sliderBox).Для этого я использовал плагин hoverIntent и работал как шарм.

Я также хочу, чтобы div (#thumbnails) исчезал при простое в течение 5 секунд.Мне удалось заставить его работать с помощью setTimeout ();

Моя проблема: Если я останусь без дела сверху #sliderBox div, div #thumbnails div не исчезнет при перемещениимышь сноваМне нужно вытащить курсор мыши из div #sliderBox и снова навести на него курсор, чтобы снова сделать #thumbnails div fadeIn.

Есть ли способ исправить это?

Это мой код: 

$(document).ready(function() {

$("#thumbnails").hide();

$("#sliderBox").hoverIntent(showThumbs, hideThumbs);

  var timer;

  $(document).mousemove(function() {

        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }

        timer = setTimeout(function() {
            $('#thumbnails').fadeOut(1000)
            }, 5000)
   });


 });

    function showThumbs(){ $("#thumbnails").fadeIn(1000);}
    function hideThumbs(){ $("#thumbnails").fadeOut(800);}

Ответы [ 2 ]

1 голос
/ 12 марта 2012

Проблема заключается в плагине, который срабатывает на mouseenter, поэтому не будет срабатывать, пока вы не выйдете и не войдете снова.Единственное решение - изменить сам плагин, чтобы активировать mouseenter или mousemove (только после задержки).Плагин выглядит довольно просто и хорошо прокомментировано.Я не думаю, что это будет слишком сложно изменить.

Удачи и бога!

0 голосов
/ 12 марта 2012

Вы должны быть в состоянии сделать это без необходимости редактировать плагин.

В дополнение к обработке 'mousemove' документа, обрабатывайте 'mousemove' sliderBox, независимо от плагина, но вызывая ту же самую функцию showThumbs().

Код будет примерно таким (непроверенным): 

$(function(){
    var timer, $thumbnails = $("#thumbnails").hide();
    function showThumbs(){
        if($thumbnails.is(":hidden")){
            $thumbnails.fadeIn(1000);
        }
    }
    function hideThumbs(){ $thumbnails.fadeOut(800); }
    $("#sliderBox").on('mousemove', showThumbs).hoverIntent(showThumbs, hideThumbs);
    $(document).on('mousemove', function(){
        clearTimeout(timer);
        timer = setTimeout(hideThumbs, 5000);
    });
});

В showThumbs() вы увидите, что я сделал $thumbnails.fadeIn(1000) условным. Это абсолютно не нужно, но дает showThumbs() меньше работы, что является важным соображением сейчас, когда он присоединен как обработчик «onmousemove».

...