Функциональность JQuery для «приостановки и пополнения» таймера, если курсор находится внутри элемента - PullRequest
Новая
       42

Функциональность JQuery для «приостановки и пополнения» таймера, если курсор находится внутри элемента

0 голосов
/ 01 февраля 2012

Дизайнер, с которым я работаю, дал мне немного функциональности, и я не знаю, как к этому подойти. Она в основном хочет следующее;

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

Может ли кто-нибудь указать мне правильное направление в виде плагина или статьи, в которой объясняется, как добиться этой третьей функциональности? Я довольно опытный разработчик, но я борюсь с тем, как подойти к этому или даже с чего начать поиск в Google. Вот то, что я имею до сих пор, все работают, но для этого третьего пункта пули. У меня есть ощущение, что мне может понадобиться полностью изменить мой подход, чтобы заставить это работать; 

function showMiniBasket() {
    $("#basketMiniSummary").slideDown();
}
function hideMiniBasket() {
    $("#basketMiniSummary").fadeOut();
}

var config = {
    over: showMiniBasket, 
    timeout: 10000, 
    out: hideMiniBasket 
};

$("#basketDropDown").hoverIntent(config);

ОТВЕТ ...

Основываясь на предложении ниже, окончательное решение было ... 

function showMiniBasket() {
    $("#basketMiniSummary").slideDown("fast");
}

function hideMiniBasket() {
    if (!$('#basketMiniSummary').hasClass('being_hovered')) {
        $("#basketMiniSummary").fadeOut();
    }
}

var config = {
    over: showMiniBasket,
    timeout: 1000,
    out: hideMiniBasket
};

$("#basketDropDown").hoverIntent(config);

$('#basketMiniSummary').hover(function() {
    //hover in
    $(this).addClass('being_hovered');
    $("#basketMiniSummary").slideDown();
}, function() {
    //hover out
    $(this).removeClass('being_hovered');
    $("#basketMiniSummary").delay(1000).fadeOut();        
});

1 Ответ

1 голос
/ 01 февраля 2012

Я бы использовал $. Hover примерно так: 

    $('#the_panel').hover(function () {
        //hover in
        $(this).addClass('being_hovered');
        $("#basketMiniSummary").slideDown();
    }, function () {
        //hover out
        $(this).removeClass('being_hovered');
        setInterval('hideMiniBasket()', 10000);
    });

    //Also hideMiniBasket should be modified
    function hideMiniBasket () {
        if (!$('#the_panel').hasClass('being_hovered')) {
            $("#basketMiniSummary").fadeOut();
        }
    }
...