Question

I built a slideshow-menu (using Slide JS – http://www.slidesjs.com/ ) and added a hover-event, so images will already switch when moving the mouse over the menu point. Additionally, when moving out of the whole block, there’s a mouseleave event, which sets the image and menu point back to the first one.
Now when I quickly switch between menu points (hover event) and then leave the whole block (mouseleave), it usually skips the mouseleave event (- or it never reaches it because the hover events (including a fade effect) take up too long).

Is there a way to thoroughly work off each event (or at least the last one in a row – e.g. mouseleave or last hover)?

Maybe an image of the website layout helps?

Red: Hover-Event (changes green content)

Blue: Mouseleave-Event (green goes back to default)

Answer 1

If the fade effect is the culprit, then try adding a stop(true, true) function before your fade effect.

$(slideshow-menu-selector).on('mouseleave', function(){
    // Reset code here
    $(element-selector).stop(true, true).fadeOut();
})

This is just a sample code, based on your question. If you can put up a Fiddle, it would help a lot!