Reputation: 9855

On mouseover and mouseleave repeating function?

I have a function im trying to write that shows a tooltip on hover and fades it out on mouseleave:

$('.tt').mouseover(function(e) { 
    var tip = $(this).find('.tooltip');              
    //Set the X and Y axis of the tooltip
    $('.tooltip').css('top', 0 );
    $('.tooltip').css('right', -200);
    tip.fadeIn('500');
}).mouseout(function(e) {
    var tip = $(this).find('.tooltip');
    tip.fadeOut('500'); 
});

If the user gets erratic with the mouse and hovers multiple times the tooltip flashes, essentially. Is there a way I can prevent this?

Upvotes: 1

Answers (7)

Daryl Ginn

Reputation: 1424

You're looking for .stop( [clearQueue ] [, jumpToEnd ] ).

tip.stop(true, true).fadeIn(500);
tip.stop(true, true).fadeOut(500);

You can find out more about .stop() here.

Upvotes: 4

Jay Blanchard

Reputation: 34416

Add stop() - http://api.jquery.com/stop/

$('.tt').mouseover(function(e) { 

    var tip = $(this).find('.tooltip');

    //Set the X and Y axis of the tooltip
    $('.tooltip').css('top', 0 );
    $('.tooltip').css('right', -200);
    tip.stop().fadeIn(500);

}).mouseout(function(e) {

    var tip = $(this).find('.tooltip');
    tip.stop().fadeOut(500);

});

Upvotes: 3

Roko C. Buljan

Reputation: 206038

LIVE DEMO

Sure, using the .stop() method and mouseenter mouseleave

$('.tt').on('mouseenter mouseleave', function( e ) { 

    var elOpacity = e.type=='mouseenter' ? 1 : 0 ;
    var $tip = $(this).find('.tooltip');

    $('.tooltip').css({top: 0, right: -200 });
    $tip.stop().fadeTo(500, elOpacity);

});

The .on() method in the example above allows you to create a 'list' of events we're interested in,
than inside a Conditional operator (Ternary (?:) ) we listen for the e (event) changes and assing a value for the element opacity passing it to .fadeTo() animation method.
.stop() will end a previous animation without creating animation buildups.

Upvotes: 0

Mark Schultheiss

Reputation: 34168

try the actual enter/leave - might not work if the tip is place where .tt loses focus when tip is displayed.

Add a stop, simplify the css to an object.

$('.tt').mousenter(function(e) { 
    var tip = $(this).find('.tooltip');
    //Set the X and Y axis of the tooltip
    tip.css({'top':0,'right': -200});
    tip.stop().fadeIn('500');
}).mouseleave(function(e) {
   $(this).find('.tooltip').stop().fadeOut('500');
});

Upvotes: 0