CODEWITHSUNDEEP
javascriptjqueryhtmltooltipjquery-hover
BobDroid
BobDroid

Reputation: 1908

How to overcome from this issue in jquery for an animated hover effect?

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....

Upvotes: 1

Views: 140

Answers (3)

xdazz
xdazz

Reputation: 160883

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.

Upvotes: 3

NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5203

You can specify only a hover event, and that will fire whenever there is a mouseenter, you cannot specify something like "This hover should fire only if the previous hover fired at east 5 seconds earlier". You can use the Hoverintent plugin to specify that the hover should fire only when the mouse has been inside for say 0.5 seconds.

Upvotes: 0

Shabnam K
Shabnam K

Reputation: 1582

Use $(".menu li").hover for the tool-tip to appear once.

Upvotes: 0

Related Questions