Adding delay to jquery event on mouseover

Question

I am trying to add a simple delay to a mouseover event of a child and having difficulties. (Still learning!)

This enables me to show the popup after a delay, but shows all of them simultaneously:

onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'

and this works to show only the popup I want with no delay:

onmouseover='$(this).children(\".skinnyPopup\").show()'

but the combination does not:

onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'

Any help would be appreciated. Thanks!

Answer 1

You need to define what this is when it executes, something like this would work:

setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)

Or just use .delay(), like this:

$(this).children(".skinnyPopup").delay(600).show(0);

Both of the above are quick fixes, I suggest you move away from inline handlers and check out an unobtrusive method (see this answer by Russ Cam for some great reasons), for example:

$(function() {
  $('selector').mouseover(function() {
    $(this).children(".skinnyPopup").delay(600).show(0);
  });
});