Question

I have the following code to display the paragraph of a post, after the mouse is over the H1 tag, but I want to prevent displaying the paragraph if the mouse pass ramdomly over the H1 tags (they are several in one page), so the user has to stay some time over the H1 tag to display de post paragraph. In the other hand, if the user rolls out the H1 but goes over the P tag, the paragraph do not toggle.

This is the jQuery code I have written by now:

    $("div#postContainer p").hide(); //By default, we hide the post paragraph
    $("div#postContainer h1").hover(function() {
        $(this).removeClass("less").addClass("more");
        $(this).next("p").animate({opacity:"show",height:"toggle"}, "slow");
    }, function() {
        $("div#postContainer h1 span").removeClass("more").addClass("less");
        $(this).next("p").animate({opacity:"hide",height:"toggle"}, "normal");
    });

If anyone knows a solution, I appreciate it very much.

Answer 1

window.setTimeout() (with window.clearTimeout()) is what you need.

var myInterval;

$("...").hover(function() {
   myInterval = window.setTimeout(function() {
      // display
   }, 500);
}, function() {
   window.clearInterval(myInterval);
   // hide if visible
});

Also, attach .hover to div#postContainer, not to div#postContainer h1. Your post won’t disappear when you move mouse over p.