Search code examples
jqueryloopshovertooltipeventtrigger

jQuery tooltip hover loops animation

I created a custom tooltip system in jQuery that creates a new element with CSS styling to position it above all of the other items and in the proper location.

Everything works properly, but when the mouse moves over the tooltip, any animation that was caused by hovering over the parent object starts looping.

Is there some way that I could prevent the hover event from triggering on my tooltips?

Here is my code: http://jsfiddle.net/UzUct/1/

Solution

  • Change this part of the Script:

    // Parent Hover Script
$(".item").hover(function() {
    $(this).stop().animate({
        "opacity": "0.5"
    },"fast");
},function() {
    $(this).stop().animate({
        "opacity": "1"
    },"fast");
});

    You should give .stop() to stop the previous animation! :)

    Fiddle: http://jsfiddle.net/UzUct/4/