Question

I have a link. When I hover over it, there should be a delay of 1-2 seconds, after which a div will appear. The div should stay when I hover over it.

If I am not hovering on either the link or the div, the div should disappear after a delay of 1-2 seconds.

I’m not sure how to accomplish this. Could someone help? What I’m trying to achieve is similar to how Google sows previews of websites.

var formHide;
$('.toggleDisForm').hover(function() {
   var form = $(this).parents("li").find(".dispenserForm");
   function showIt() {
      form.fadeIn();
   }
   show = setTimeout(showIt, 1000);
   clearTimeout(formHide);
}, function() {
   var form = $(this).parents("li").find(".dispenserForm");
   function hideIt() {
      form.fadeOut();
   }
   clearTimeout(show);
   hideDispen = setTimeout(hideIt, 1000);
   $('.dispenserForm').not(form).hide();
});

var hideDispen;
$('.dispenserForm').hover(function() {
   $('.dispenserForm').not(this).hide();
   clearTimeout(hideDispen);
}, function() {
   var form = $(this);
   function showMe() {
      form.show();
   }
   formHide = setTimeout(showMe, 1000);
});

Her is the markup

<ul class="clearfix">       
    <li>
        <div class="inner">
            <a class="toggleDisForm" href="#">hover
                       <div class="dispenserForm">
                The div that should appear
                  </div>
                    </a>
        </div>

    </li>

    <li>
        <div class="inner">
            <a class="toggleDisForm" href="#">hover
                       <div class="dispenserForm">
                The div that should appear
                  </div>
                    </a>
        </div>
    </li>

    <li>
        <div class="inner">
            <a class="toggleDisForm" href="#">hover
                       <div class="dispenserForm">
                The div that should appear
                  </div>
                    </a>
        </div>
    </li>

    etc...      
</ul>

Answer 1

The code you have posted isn’t working because code inside setTimeout is run in the global scope. this no longer refers to the same thing anymore. Try something like this:

$('.toggleDisForm').hover(function() {
   var form = $(this).parents("li").find(".dispenserForm");
   function showIt() {
      form.show();
   }
   show = setTimeout(showIt, 2000);
}, function() {
   clearTimeout(show);
   $('.dispenserForm').hide();
});

In general, it’s better practice to use setTimeout this way (with a function instead of a string).

EDIT: In response to your comment, let’s see if we can get it to hang around a little bit after it’s shown.

var formHide;
$('.toggleDisForm').hover(function() {
   var form = $(this).parents("li").find(".dispenserForm");
   function showIt() {
      form.show();
   }
   show = setTimeout(showIt, 2000);
   clearTimeout(formHide);
}, function() {
   var form = $(this).parents("li").find(".dispenserForm");
   function hideIt() {
      form.hide();
   }
   clearTimeout(show);
   hide = setTimeout(hideIt, 1500);
   $('.dispenserForm').not(form).hide();
});
$('.dispenserForm').hover(function() {
   $('.dispenserForm').not(this).hide();
   clearTimeout(hide);
}, function() {
   var form = $(this);
   function hideMe() {
      form.hide();
   }
   formHide = setTimeout(hideMe, 500);
});

Does that work?