treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Delaying a jquery event

  • 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/

    $(document).ready(function() {

    $(\"#push\").click(function(){
    $(\"#reveal\").slideToggle();
    });

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

    });

    });
  • 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?
  • Typically delays are handled with the setInterval function.

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

    function doTheHide() {
    $(\"#reveal\").slideUp();
    }

    $(\"#push\").hover(function(){
    // do nothing
    }, function(){
    var int = setInterval(\"doTheHide()\",2000);
    });
  • Actually, setTimeout is even better here, sorry about that:

    setTimeout("yourFunction()",2000);
  • 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:

    	$(document).ready(function() {

    function doTheHide() {
    $(\"#reveal\").slideUp();
    }

    $(\"#push\").click(function(){
    $(\"#reveal\").slideToggle();
    });

    $(\"#container\").hover(function(){
    // do nothing
    }, function(){
    setTimeout(\"doTheHide()\",1000);
    });
    });
  • 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);
  • thanks dave, that sorted it! :D
  • No problem!