Question

The designer I am working with has given me a bit of functionality to work on and I’m not sure how to approach it. She basically wants the following;

• When you hover over a link, a panel should drop down (done this bit no problem)
• The panel should dissapear after 10 seconds (also done no problem)
• If your cursor is within the panel, the panel should never dissapear. Once your cursor leaves the panel, the 10 second timer should start again (erm..)

Could anyone point me in the right direction of a plugin or article that explains how to achieve this third bit of functioality? I’m a fairly seasoned developer but am struggling with how to approach this or even where to start googling. Here’s what I have so far, all working but for that third bullet point. I have a feeling I may need to completely change my approach to get this to work;

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

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

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

THE ANSWER…

Based on a suggestion below, the eventual solution was…

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

Answer 1

I would use $.hover like so:

    $('#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();
        }
    }