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