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);
  });
});

Answer 2

It's because this is bound to the global context, not the element. Use something like the following instead:

// put this in your document head -- replace element with a selector for the elements you want
$(function () {
    $(element).bind("mouseover", function () {
       var e = $(this);
       setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
    });
});

If you're adamant about inline event handlers, the following should also work:

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