Grow your CSS skills. Land your dream job.

Delaying a jquery event

  • # February 25, 2009 at 5:44 pm

    i have a div that is set to reveal when you click a button, and hide when you move the mouse away from the container div. i cant figure out how to set make it hide only after a delay of a second or two. anyone know how i would go about this?

    http://charles-harvey.co.uk/examples/hover/

    Code:
    $(document).ready(function() {

    $(“#push”).click(function(){
    $(“#reveal”).slideToggle();
    });

    $(“#push”).hover(function(){
    // do nothing
    }, function(){
    $(“#reveal”).slideUp();

    });

    });

    Rob
    # February 25, 2009 at 6:47 pm

    If you add a .animate({opacity: 1.0}, 3000) as the first action after the hover out, then chain the rest of your stuff – it will stay visible for like 3 seconds then remove itself.

    Ya?

    # February 25, 2009 at 10:13 pm

    Typically delays are handled with the setInterval function.

    http://www.w3schools.com/HTMLDOM/met_wi … terval.asp

    Code:
    function doTheHide() {
    $(“#reveal”).slideUp();
    }

    $(“#push”).hover(function(){
    // do nothing
    }, function(){
    var int = setInterval(“doTheHide()”,2000);
    });

    # February 25, 2009 at 10:27 pm

    Actually, setTimeout is even better here, sorry about that:

    setTimeout("yourFunction()",2000);

    # February 26, 2009 at 10:13 am

    Thanks for your replies. I tried both, Robski’s worked,but Chris’s didnt. Not sure if i got the code wrong. Heres what ive got:

    Code:
    $(document).ready(function() {

    function doTheHide() {
    $(“#reveal”).slideUp();
    }

    $(“#push”).click(function(){
    $(“#reveal”).slideToggle();
    });

    $(“#container”).hover(function(){
    // do nothing
    }, function(){
    setTimeout(“doTheHide()”,1000);
    });
    });

    # February 26, 2009 at 1:36 pm

    It’s because the function doTheHide is declared locally (i.e. inside another function). To call it you should specify it as a function pointer instead of a string.

    setTimeout(doTheHide,1000);

    # February 26, 2009 at 2:54 pm

    thanks dave, that sorted it! :D

    # February 26, 2009 at 4:12 pm

    No problem!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".