Can someone explain why this won't work?
jQuery('.right-et-tooltip').delay(800).mouseout(function(){
jQuery(this).find('.right-et-tooltip-box').animate({ opacity: 'hide', left: '-100px' }, 30);
});
I get no delay at all. Just as soon as the mouse is out, BOOM it goes away.
Thanks, I have tried a few things, so just frustrated.
Your delay is doing absolutely nothing because it's bound to the jQuery selector and not to the function within the mouseout handler.
Try this instead...
jQuery('.right-et-tooltip').mouseout(function(){
jQuery(this).find('.right-et-tooltip-box').delay(800).animate({ opacity: 'hide', left: '-100px' }, 30);
});
Your jsFiddle with the correction applied...
EDIT (a side note):
It would be much better to use the mouseenter & mouseleave methods rather than the mouseover & mouseout methods which tend to cause a rapid blinking effect during the time your mouse is hovering.
Your same exact two functions insterted into a .hover() method here...
EDIT 2:
When you re-enter before the leave animation completes, the animations will queue up. If you enter & leave really fast several times, you'll have all those animations to blink on/off before they stop.
To prevent the animation queue from stacking up and creating a new issue where it comes on/off because of the mouseleave delay, use a jQuery .stop(true, false) on the mouseenter function like this...
jQuery(this).find('.right-et-tooltip-box').stop(true,false).animate({ opacity: 'show', left: '-100px' }, 30);
Upon mouseenter, it stops any mouseleave animation immediately. The true on the "clearQueue" option clears out the animation queue and the false on the "jumpToEnd" option says to stop the current animation instead of completing it immediately.
Modified demo...