Adding delay to jquery event on mouseover

Question

I am trying to add a simple delay to the mouse event and the occurrence of difficulties. (Still learning!)

This allows me to display a popup after a delay, but it shows all of them at the same time:

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

and this works to show only the popup that I want without delay:

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

but the combination doesn't matter:

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

Any help would be greatly appreciated. Thanks!

Answer 1

You need to determine that this when it is running, something like this will work:

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

Or just use .delay() , for example:

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

Both of the above are quick fixes, I suggest you move away from the built-in handlers and check out the unobtrusive method (see this Russ Cam answer for a number of reasons), for example:

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

Answer 2

This is because this bound to the global context, not to the element. Use 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 are steadfast about built-in event handlers, then the following should also work:

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