jQuery: Stop repeating animation on multiple rollovers?

问题

I'm having trouble stopping an animation...if i rollover a link to reveal a box 5 times and come off..the "Show" effect happens 5 times...as i come off it I only want it to show once....

Basically it seems to get stuck in a loop....

Any ideas how to stop the multiple instances?

jQuery(document).ready(function(){
    jQuery('.ttip').hover(
        function() {
            var offset = jQuery(this).offset();
            console.log(offset)
            var width = jQuery(this).outerWidth();
            var tooltipId = jQuery(this).attr("rel");
            jQuery('#tooltip-container').empty().load('tooltips.html' + tooltipId).fadeIn(500);
            jQuery('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
        },
        function() {
          jQuery('#tooltip-container').fadeOut(500);
        });
});

回答1:

You should use stop(true).

See http://api.jquery.com/stop

回答2:

As Stefan says force the animation to jump to the end with a stop(true) like this example using your code:

jQuery(document).ready(function(){
jQuery('.ttip').hover(
    function() {
        var offset = jQuery(this).offset();
        console.log(offset)
        var width = jQuery(this).outerWidth();
        var tooltipId = jQuery(this).attr("rel");
        jQuery('#tooltip-container').empty().load('tooltips.html' + tooltipId).stop(true).fadeIn(500);
        jQuery('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
    },
    function() {
      jQuery('#tooltip-container').stop(true).fadeOut(500);
    });
});

来源：https://stackoverflow.com/questions/9113568/jquery-stop-repeating-animation-on-multiple-rollovers