Adding mouseOut time

Question

How do I modify this script so that when I mouseout of the submenu, it still remains open for x seconds?

Currently it slidesup (hides) as soon as I mouseout. I need hoverintent like functionality where it hides after x seconds.

HTML:

<div id="navigation">
        <ol>
            <li><a href="#" class="parent">Menu 1</a>
                <div class="submenu clear"><div class="listings clear"> content</div></div>
            </li>         
        </ol>
</div>

Thanks for your help!

Answer 1

I feel like I'm doing someone elses work here, but anyway, the code that makes the thing go away seems like it's this:

bm_item_content_obj.slideUp( 'fast',  function() {
    bm_item_link_obj.removeClass("bm-item-link-hover");
});

So just wrap it in a timer if you want it to happen after x seconds:

setTimer(function() {

    bm_item_content_obj.slideUp( 'fast',  function() {
        bm_item_link_obj.removeClass("bm-item-link-hover");
    });

}, 5000); // 5 seconds

Answer 2

Something like:

jQuery(element_here).delay(5000).slideup('fast', function() {
    bm_item_link_obj.removeClass("bm-item-link-hover");
});

would work

If your basing it on your html in your question/ JSfiddle, you would change your JS in the select statement to look like this:

case "slideUp":
    bm_item_content_obj.delay(5000).slideUp( 'fast',  function() {
        bm_item_link_obj.removeClass("bm-item-link-hover");
    });

Also it would be better to wrap:

$("#navigation ol").bigmenu();

in:

$(document).ready(function () {

    // NAVIGATION
    $("#navigation ol").bigmenu();

});

than

$(window).load(function () {

    // NAVIGATION
    $("#navigation ol").bigmenu();

});

To get other links to slide up when you go on to another link straight away you need this:

$(".submenu").not(bm_item_content_obj).stop(true, true).slideUp("fast");

below whats already in:

 case "slideDown":

So it will look like:

case "slideDown":
      bm_item_content_obj.height("auto");
      bm_item_content_obj.slideDown(100);

      $(".submenu").not(bm_item_content_obj).stop(true, true).slideUp("fast");
break;