Question

In the following link there is an example for an animated hover effect . If we hover the mouse in a particular list the tool-tip will appear and disappear, here no problem. If we continuosly move the mouse up & down in a particular list the tool-tip appear for several times (for example if we move the mouse for ten times the tool-tip also appear for ten times).

How to overcome from this issue (i.e) if we hover the particular list for several time,the tool-tip should appear only once.

I tried it by changing the script as (by adding stop() function)

    $(".menu a").hover(function() {
    $(this).next("em").stop().animate({opacity: "show", top: "-75"}, "slow");

but it’s failed….

Answer 1

use .stop(true, true) to stop the animation. Check the working demo.

$(document).ready(function(){
    $(".menu a").hover(function() {
        $(this).next("em").stop(true, true).animate({opacity: "show", top: "-75"}, "slow");
    }, function() {
        $(this).next("em").stop(true, true).animate({opacity: "hide", top: "-85"}, "fast");
    });
});

Explaination:

.stop(true, true) will remove the queued animation and complete the current animation immediately.

.stop( [clearQueue] [, jumpToEnd] )

clearQueueA Boolean indicating whether to remove queued animation as
well. Defaults to false.

jumpToEndA Boolean indicating whether to complete the current
animation immediately. Defaults to false.