Question

i have a hover slide down panel which needs a delay when mouse leave.
Like i have it now, hovering the trigger will result in multiple loops, so the panel goes crazy up & down.
Here is the code:

 $(document).ready(function(){
(function(){
  var trigger = $('li.HotelPaneltrigger');
  var panel = trigger.find('.panel').hide();
    trigger.mouseenter(function(){panel.slideDown('slow');}).mouseleave(function(){panel.slideUp('slow');});
 })();
});

I tried this without success:
$(this).mouseleave(function () {
$(this).delay(‘500’)panel.slideUp(‘slow’);

Answer 1

I’m not exactly sure if I get you right, but I think invoking .stop() will do it for you.

panel.stop(true, true).slideDown('slow');

and

panel.stop(true, true).delay(500).slideUp('slow');

Reference: .stop()