Trigger a delayed hover event with Jquery

Question

I'm trying to trigger a delayed hover event:

$(".graphic").delay(500).trigger('mouseover').trigger('mouseout');

But the delay is being ignored.

Any ideas?

Answer 1

delay() only affects the animation queue, but trigger() is synchronous. You can use queue() to schedule a function triggering the events after the delay:

$(".graphic").delay(500).queue(function(next) {
    $(this).trigger("mouseover").trigger("mouseout");
    next();
});

Answer 2

The .delay() method is best for delaying between queued jQuery effects.

To delay the initial effect, use setTimeout() function. By the way, you could use mouseover() instead of trigger('mouseover')

setTimeout(function () {
  $(".graphic").mouseover().mouseout();
}, 500); 

Answer 3

The jQuery API says:

Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

Maybe you can set a timer, that will trigger mouseover/out after 500 ms using Windows.setTimeout